Gulp基本使用

切图仔

发布于 2022-09-08 15:58:41

9550

发布于 2022-09-08 15:58:41

文章被收录于专栏：生如夏花绚烂

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。

1.基本使用

npm i gulp-cli -g
npm i gulp -D
cnpm i gulp gulp-uglify gulp-concat

2.创建文件gulpfile.js键入如下

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');  
function build(done) {
    gulp.src(['src/test/**/*.js'])
            //src/js目录下所有js文件
            .pipe(concat('bundle.min.js'))//压缩成一个文件，不指定则分别压缩
            .pipe(uglify())
            .pipe(gulp.dest('./build/js'))
    done();
}
function hello(done){
    console.log('hello');
    done();
}
exports.default = gulp.series(build,hello)

上述代码会将src/test里面的所有js文件合并，压缩成一个文件并保存到./bunld/js/bundle.min.js 运行命令

gulp

返回如下

$ gulp
[08:51:09] Using gulpfile ~\Desktop\nodejs\gulp\gulpfile.js
[08:51:09] Starting 'default'...
[08:51:09] Finished 'build' after 17 ms
[08:51:09] Starting 'hello'...
hello
[08:51:09] Finished 'hello' after 1.65 ms
[08:51:09] Finished 'default' after 21 ms

编译es6

 cnpm i gulp-babel @babel/core @babel/preset-env -D

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');  
const babel = require('gulp-babel');//引入babel
function build(done) {
    gulp.src(['src/test/**/*.js'])
            //src/js目录下所有js文件
            .pipe(babel({
                presets:['@babel/env']
            }))
            .pipe(concat('bundle.min.js'))//压缩成一个文件，不指定则分别压缩
            .pipe(uglify())
            .pipe(gulp.dest('./build/1js'))
    done();
}

sourcemap

当我们执行编译时，如果代码有错会非常不利于调试，因为代码都变成一行了解决办法是通过sourcemap。 sourcemap保留了之前编译的代码使代码容易调试，当出错时浏览器会通过sorcemap恢复源代码并定位错误

 cnpm i gulp-sourcemaps -D

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');  
const babel = require('gulp-babel');
const sourcemaps = require('gulp-sourcemaps');
function build(done) {
    gulp.src(['src/1.js'])
            //src/js目录下所有js文件
            .pipe(sourcemaps.init())//sorcemap初始化
            .pipe(babel({
                presets:['@babel/env']
            }))
            .pipe(concat('bundle.min.js'))//压缩成一个文件，不指定则分别压缩
            .pipe(uglify())
            .pipe(sourcemaps.write('../maps'))//sourcemap数据写入
            .pipe(gulp.dest('./build/js'))
    done();
}
function hello(done){
    console.log('hello');
    done();
}
exports.default = gulp.series(build,hello)

某js文件

alert("0134256u6i")
Datw.style.backgroundColor='red'

我们的代码并没有Text元素，但打包时不会报错

当html引入打包后的js文件时

直接定位了错误信息，方便调试不过使用这个功能必须打开谷歌浏览器的Enable Javascript source maps

css

cnpm i gulp-cssmin -D

const gulp = require('gulp');
const concat = require('gulp-concat');  
const cssmin = require('gulp-cssmin');
const sourcemaps = require('gulp-sourcemaps');
function build(done) {
    gulp.src(['src/*.css'])
            //src/js目录下所有js文件
            .pipe(sourcemaps.init())//sorcemap初始化
            .pipe(concat('test.min.css'))//压缩成一个文件，不指定则分别压缩
            .pipe(cssmin())
            .pipe(sourcemaps.write('../maps'))//sourcemap数据写入
            .pipe(gulp.dest('./build/css'))
    done();
}

exports.default = build;

自动监听

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');  
const babel = require('gulp-babel');
const sourcemaps = require('gulp-sourcemaps');
const watcher = gulp.watch(['./src/*.js']);
const livereload = require('gulp-livereload');

//打包函数
let js = function js(done){
    gulp.src(['src/*.js'])
    //src/js目录下所有js文件
    .pipe(sourcemaps.init())//sorcemap初始化
    .pipe(babel({
        presets:['@babel/env']
    }))
    .pipe(concat('bundle.min.js'))//压缩成一个文件，不指定则分别压缩
    .pipe(uglify())
    .pipe(sourcemaps.write('../maps'))//sourcemap数据写入
    .pipe(gulp.dest('./build/js'))
    .pipe(livereload());
    console.log(`File was changed`);
    done()

}
//监听文件
function watch(){
    livereload.listen();
    gulp.watch('./src/*.js', js)
    //重新加载对应文件
    gulp.watch(['./src/*.js','./index.html']).on('change',function(path){
        livereload.changed(path)
    })

}

    
exports.default = watch;
/**
 * 1.指定路径
 * 2.打包指定输出的文件
 * 3.压缩
 * 4.输出目录
 * cnpm i gulp gulp-uglify gulp-concat  gulp-rename
 * sourcemap 保留了之前编译的代码使代码容易调试
 * 出错，浏览器通过sorcemap恢复源代码
 * cnpm i gulp-sourcemaps -D\
 * gulp-watch 
 * livereload
 * cnpm i -g http-server
 * cnpm i gulp-livereload -D
 * 安装插件 
 */

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-07-25 ，如有侵权请联系 cloudcommunity@tencent.com 删除

打包