gulp使用入门

API 文档
所有压缩插件，可参考gulp官方或者node官方

1.安装node和gulp：
node安装暂不介绍。
gulp安装：本地安装： npm install gulp / npm install gulp --save-dev
ps：如果只是本地安装，后面在使用gulp命令的时候会报错，所以还需要全局安装npm install gulp -g
ps：另外这里介绍下 npm install gulp 和 npm install gulp --save-dev的区别:

添加 package到： dependencies（生产环境）
npm install <package-name> --save 或
npm install <package-name>
添加 package到： devDependencies（开发环境）
npm install <package-name> --save-dev

dependencies主要是放一些你程序跑起来所必须的模块
devDependencies主要放一些工具类的模块，你打包之后就不需要了的，比如ES6转ES5，scss转css，文件压缩等等。

如下图，我们要在gulp目录下，本地安装gulp，安装好之后里面就会有一个node_modules文件夹（里面放的我们安装的gulp，后面的插件也都是在这里，不详细介绍）

image.png

2.新建：assets放源文件，dist放压缩后的文件，以及一个 gulpfile.js 文件：

image.png
ps：package.json文件是怎么来的？有什么用？可以查下node相关知识，下面简单介绍下：
使用node init即可初始化文件夹，创建package.json文件，这里面记录了你安装的所有包。如果你的代码要给另一个人使用，而node_modules文件夹又太大，不方便上传到代码库，那个人也不可能把你安装的所有依赖包一个一个再安装一遍，这个时候如果有package.json文件，直接使用npm install，就可以把要下载的包全部下载下来了。

gulp基础语法,使用压缩js来介绍，比如我们下面把assets下的js压缩到dist下

// 获取 gulp
var gulp = require('gulp');
//require() 是 node （CommonJS）中获取模块的语法。
//在 gulp 中你只需要理解 require() 可以获取模块。

// 获取 uglify 模块（用于压缩 JS）
var uglify = require('gulp-uglify');

// 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('script', function() {
    // 1. 找到文件
    gulp.src('assets/*.js')
    // 2. 压缩文件
        .pipe(uglify())
    // 3. 另存压缩后的文件
        .pipe(gulp.dest('dist/js'))
})
// gulp.task(name, fn) - 定义任务，第一个参数是任务名，第二个参数是任务内容。
// gulp.src(path) - 选择文件，传入参数是文件路径。
// gulp.dest(path) - 输出文件
// gulp.pipe() - 管道，你可以暂时将 pipe 理解为将操作加入执行队列

3.可以看到上面的代码里面依赖gulp-uglify这个模块，下面我们用node安装gulp-uglify模块，命令：npm install gulp-uglify --save-dev
然后跳转至 gulpfile.js 所在目录，执行 gulp script 命令，js压缩就完成了
4.优化，自动更新。当 js 里面的js更新后，自动执行 gulp script
可以使用 gulp.watch(src, fn) 检测指定目录下文件的修改后执行任务。
但是没有命令可以运行 gulp.watch()，需要将 gulp.watch() 包含在一个任务中。
接着在命令行输入 gulp auto，自动监听 js/*.js 文件的修改，并压缩js。我们在 gulpfile.js 后面添加如下代码：

// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
    // 监听文件修改，当文件被修改则执行 script 任务
    gulp.watch('assets/*.js', ['script'])
})

5.最后，使用 gulp.task('default', fn) 定义默认任务（通俗点说，就是把里面的两个任务合并起来，这样就不用执行多次了）
此时你可以在命令行直接输入 gulp +回车，运行 script 和 auto 任务。我们在 gulpfile.js 后面添加如下代码：

// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 script 任务和 auto 任务
gulp.task('default', ['script', 'auto'])

PS.若被压缩的js有的在子目录，有的在二级子目录，则可使用**，比如下面代码，可以找到 assets/js 文件夹下的所有js文件：
gulp.src('assets/js/**/*.js')

下面贴上一个基础的gulpfile.js，压缩html，压缩js，压缩css，压缩img，scss转css等等
相关依赖包：

image.png

var gulp = require('gulp'),
    uglify = require('gulp-uglify'), //压缩js
    sass = require('gulp-sass'),//scss转css
    minifycss = require('gulp-minify-css'),//压缩css//gulp-minify-css已经被废弃，请使用gulp-clean-css，用法一致。
    imagemin = require('gulp-imagemin'),//压缩image
    htmlmin = require('gulp-htmlmin'),//压缩html
    concat = require('gulp-concat'),//合并文件
    rename = require('gulp-rename'),//重命名
    del = require('del');//删除，一般执行压缩前，先删除文件夹里的内容

// 执行压缩前，清空文件夹
gulp.task('clean', function() {
    return del(['dist/html','dist/css','dist/js','dist/img'])//异步操作，只有return后再执行其他动作，才不会顺序混乱。
//下面可以不用加return，因为没有顺序优先级
});

gulp.task('jsmin', function() {
    var options = {
        dirname: "aa",//aa文件夹下，一般不设置
        basename: "bb",//文件名，一般不设置
        prefix: "cc-",//前缀，一般不设置
        suffix: "-dd",//后缀，一般只用设置这个属性，比如：.min
        extname: ".js"//文件类型，一般不设置
    }// 这个生成的结果：aa文件夹下有个cc-bb-dd.js
    gulp.src('assets/js/**/*.js')
        .pipe(concat('main.js'))//合并所有js到main.js
        .pipe(rename(options))//rename压缩后的文件名
        .pipe(uglify())//压缩
        .pipe(gulp.dest('dist/js'));//输出
})

gulp.task('cssmin', function(){
    gulp.src('assets/scss/**/*.scss')
        .pipe(sass())//转成css
        .pipe(minifycss())//压缩css
        .pipe(gulp.dest('dist/css'))
});

gulp.task('imagemin', function(){
    gulp.src('assets/img/**/*.{png,jpg,gif}')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/img'))
});

gulp.task('htmlmin', function () {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    gulp.src('assets/html/**/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist/html'));
});

gulp.task('auto', function () {
    gulp.watch('assets/js/**/*.js', ['jsmin']);
    gulp.watch('assets/scss/**/*.scss', ['cssmin']);
    gulp.watch('assets/html/**/*.html', ['htmlmin']);
    gulp.watch('assets/img/**/*.{png,jpg,gif}', ['imagemin']);
})


gulp.task('default', ['clean'], function() {
    gulp.start('auto','jsmin','cssmin','htmlmin','imagemin');
});