VSCode下，使用gulp构建自动化工作流

1.gulp介绍

• gulp官方网址：http://gulpjs.com
• gulp插件地址：http://gulpjs.com/plugins

2.gulp安装

• 先安装node.js
• 再安装npm

• 全局安装gulp （用于执行gulp任务）

  npm install gulp -g

• 本地安装（用于调用gulp插件）

  npm install gulp –save-dev

注:–save-dev,是为了把安装的gulp写进本地依赖

3.gulp使用

• 3.1创建package.json文件

  npm init

• 3.2本地插件安装（如编译sass、压缩js等）

  npm install –save-dev gulp-sass

• 3.3手动创建gulpfile.js文件，编写如下内容

    // 1.导入工具包 require('node_modules里对应模块')
    var gulp = require('gulp'), //本地安装gulp所用到的地方
    sass = require('gulp-sass');   // 插件sass

    // 2.定义一个testLess任务（自定义任务名称）
    gulp.task('sass', function () {
        gulp.src('sass/main.scss') //该任务针对的文件
            .pipe(sass()) //该任务调用的模块
            .pipe(gulp.dest('css'));//将会在css/下生成main.css
    });
    // 3.定义默认任务
    gulp.task('default',['sass']); 
    // 4.watch，为了方便我们可以watch，实时监控文件变化
    gulp.task('watch', function() {
    gulp.watch('sass/*.scss', ['sass']);      // 监听目录下的文件，若文件发生变化，则调用sass任务。
    });

4.运行gulp

• 
  
• 命令行下面输入gulp 任务名（如下所示）
  

gulp default
或者
gulp sass

5.gulp常用插件

• 1.gulp-uglify （JS压缩）
• 2.gulp-minify-css（CSS压缩）
• 3.gulp-minify-html（html压缩）
• 4.gulp-jshint（JS代码检查）
• 5.gulp-concat（文件合并）
• 6.gulp-sass（编译Sass）
• 7.gulp-imagemin（压缩图片）
• 8.gulp-livereload（自动刷新）