如何使用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 进行修改最终效果图如下：