如何使用gulp

在安装好gulp之后进行如下操作：

1. 在工程项目根目录下, 新建一个gulpfile.js文件

2. 再建立两个文件夹, 分别命名为 src 和 dist

3. 再到src目录下 建立 index.html 文件

4. 任务一: 将src/index.html 复制到 dist/

我们在index.html中随便写一些代码，在gulpfile.js中做如下操作
var gulp = require('gulp');     //首先要获取到gulpAPI     
gulp.task('copy',function(){     //建立一个gulp任务名为copy(任务名任取)，
    gulp.src('./src/index.html')    //要执行任务的文件
        .pipe(gulp.dest('./dist'));    //把执行完任务的文件放到dist文件下，系统会默认新建同名的.html
});
在cmd中执行 gulp copy 执行任务

5. 任务二: 合并多个js并且混淆(压缩和加密) 使用 gulp-concat gulp-uglify

去NVM官网下载要执行任务的包 
nvm官网：https://www.npmjs.com/package/nvm
    如此处的gulp-concat、gulp-uglify

5.1 在src文件夹下 创建一个js文件夹, 再创建 /src/js/a.js 和 /src/js/b.js

整合js文件
var concat = require('gulp-concat');      //同样获取API，新建任务
var uglify = require('gulp-uglify');
gulp.task('concat-uglify',function(){
    gulp.src('./src/js/*.js/')     //目录下的所有css文件
        .pipe(concat('all.js'))     //整合到all.js文件下
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js/'))
});         

6. 任务三: 压缩css 使用gulp-cssnano

var cssnano = require('gulp-cssnano');
gulp.task('cssnano',function(){
    gulp.src('./src/styles/*.css')
        .pipe(cssnano())
        .pipe(gulp.dest('./dist/styles/'));
});

7. 转码less 使用gulp-less

8. 转码sass 使用gulp-sass

对于less、sass、scss同样可以执行类似操作
    var less = require('gulp-less');
    var sass = require('gulp-sass');    //因为scss和sass原理相同，所以可以共用一个API

    gulp.task('less-cssnano',function(){
        gulp.src('./src/styles/*.less')
            .pipe(less())
            .pipe(cssnano())
            .pipe(gulp.dest('./dist/styles/'));
        }); 
    gulp.task('scss',function(){
            gulp.src('./src/styles/*.scss')
                .pipe(sass())
                .pipe(cssnano())
                .pipe(gulp.dest('./dist/styles/'))
    });         
    gulp.task('sass',function(){
        gulp.src('./src/styles/*.sass')
            .pipe(sass())
            .pipe(cssnano())
            .pipe(gulp.dest('./dist/styles/'));
    });

8.1 错误处理:

在下载gulp-sass的时候, 发现 node-sass存在github的某一个仓库, 那个地址被墙, 需要单独先下载node-sass  具体命令如下npm i node-sass -g 然后  npm i node-sass --save-dev, 再去下载gulp-sass就可以了!

9. 压缩html 使用gulp-htmlmin 去掉注释, 去掉属性值的引号, 去掉type=”text/javascript”

gulp.task('htmlmin',function(){
    gulp.src('./src/*.html/')
        .pipe(htmlmin({collapseWhitespace: true,
                    removeScriptTypeAttributes :true,     //去掉script标签中的'text/javascript'
                    removeComments:true,      //去掉注释
                    removeAttributeQuotes:true      //去掉引号
                    }))
        .pipe(gulp.dest('./dist'))
});

10. 自动完成以上任务 使用gulp.watch

使用gulp.watch，可以自动完成以上任务
gulp.task('autogulp',function(){
    gulp.watch('./src/index.html',['htmlmin']);
    gulp.watch('./src/styles/*.scc',['scss']);
    gulp.watch('./src/js/*.js',['concat-uglify']);
});

11. 浏览器同步 使用 browser-sync 修改同步选项 登录 localhost:3001

var browserSync = require('browser-sync').create();      //注意：此处获取API要加.create()
gulp.task('brower-sync',function(){
    browserSync.init({      //初始化打开的根目录
        server:{
            baseDir:'./dist'
        }
    });
    gulp.watch('./src/index.html',['htmlmin']);       //想要在修改代码时，浏览器同步修改，则需要添加watch，而且还要实现网页自动刷新
    gulp.watch('./src/styles/*.scss',['scss']);
    gulp.watch('./src/js/*.js',['concat-uglify']);
});

实现网页自动刷新则需要在任务['htmlmin']中添加：
.pipe(browserSync.reload({
    stream:true
}))

执行任务，在弹出网页时，可以把网址框中的 localhost:3000 复制到另一浏览器中，实现同步，如想要修改同步选项，则登录 localhost:3001 进行修改
最终效果图如下：