Gulp入门

作者: 我叫Aliya但是被占用了 | 来源:发表于2020-08-24 20:05 被阅读0次

前端工具使用
[基础] 列举常用的gulp插件
Hello-Gulp
gulp安装方法，ionic native developer
前端杂记
gulp 入门
前端自动化构建工具gulp
sass/git/gulp
gulp使用
gulp 入门

API、示例

安装全局gulp

npm install --global gulp-cli

初始化项目，并创建gulpfile.js

> npm init
> npm install --save-dev gulp

// gulpfile.js
function defaultTask(cb) {
  // place code for your default task here
  cb();
}
exports.default = defaultTask

> gulp
[14:40:15] Using gulpfile ~/.../gulp-test/gulpfile.js
[14:40:15] Starting 'default'...
[14:40:15] Finished 'default' after 2.23 ms

尝试生成文件

cnpm install --save-dev gulp-uglify

const gulp = require('gulp')

gulp.task('build', function (cb) {
    // 输入口
    gulp.src('./index.js')
        .pipe(gulp.dest('./dist')) // 输出口
    cb()
});

gulp build

目录中多了dist文件夹，里面有index.js

多task共同执行和watch

const gulp = require('gulp'),
    uglify = require('gulp-uglify'),    // 压缩js
    imagemin = require('gulp-imagemin');// 压缩图片

gulp.task('build', function (cb) {
    // 输入口
    gulp.src('./src/index.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist')) // 输出口
    cb()
});

gulp.task('imagemin',function(cb){
    gulp.src('./img/*')
        .pipe(imagemin()) 
        .pipe(gulp.dest('dist/img')) 
    cb()
});

gulp.task('default', gulp.series('build', 'imagemin'));


gulp.task('watch',function(cb){
    gulp.watch('./src/index.js', gulp.series('build'));
    gulp.watch('./img/*', gulp.series('imagemin'));
    cb()
});

执行gulp后会按照顺序执行default里的任务。
执行watch后js变更或图片增减会自动重新执行任务。

Gulp Express

初始化一个express项目

npx express --view ejs

安装gulp及gulp express插件（gulp-live-server）

npm i gulp-live-server -s

在安装gulp及它的相关依赖包时注意版本匹配（上面的例子是gulp4+的，受制于gulp-live-server，以下都是3+的）

var gulp = require('gulp');
var gls = require('gulp-live-server');
 
gulp.task('serve', function() {
    //1. run your script as a server
    var server = gls('./bin/www', {env: {DEBUG: 'myapp:*'}});
    server.start();
  
    //use gulp.watch to trigger server actions(notify, start or stop)
    gulp.watch(['public/stylesheets/*.css', 'static/**/*.html'], function (file) {
      server.notify.apply(server, [file]);
    });
    gulp.watch(['app.js', 'routes/*.js'], function () {
        server.start.bind(server)()
    }); //restart my server
     
});

执行gulp serve可以实现热更新