gulp使用

一.准备:

• Npm 是去国外的一个服务器下载js包, 那么有的时候会卡, 可以使用国内的镜像代替,
• 测试使用cnpm -v 有弹出版本号, 则安装完成
• 新建一个项目目录, 路径之中不能带有中文, 并且项目目录名称不能是gulp  !!!!
• 到新建的项目目录中打开命令行工具! 然后使用 npm init 或者 cnpm init
• 认识几个名词  --global(-g)  全局安装   --save-dev  开发依赖    --save  生产环境依赖
• 安装中文网站的入门指南进行操作, 安装好gulp之后, 输入gulp -v 测试是否安装完毕!
• --save-dev : 是将第三方插件添加到工程项目开发依赖列表,以下插件主要用于html/css/js文件压缩合并混淆以及浏览器同步操作:

"devDependencies": {
　　"browser-sync": "^2.18.13",
　　"gulp": "^3.9.1",
　　"gulp-concat": "^2.6.1",
　　"gulp-cssnano": "^2.1.2",
　　"gulp-htmlmin": "^3.0.0",
　　"gulp-less": "^3.3.2",
　　"gulp-sass": "^3.1.0",
　　"gulp-uglify": "^3.0.0",
　　"node-sass": "^4.5.3"
}

二.在gulp安装完毕之后,使用gulp:  

1. 在工程项目根目录下, 新建一个gulpfile.js文件
2. 再建立两个文件夹,  分别命名为 src  和  dist
3. 再到src目录下  建立  index.html 文件
4. 创建完成:

• 将src/index.html  复制到dist/ 
• 在src文件夹下 创建一个js文件夹, 再创建 /src/js/a.js  和 /src/js/b.js  , 合并多个js并且混淆(压缩和加密) 使用 gulp-concat  gulp-uglify
• 任务三: 压缩css  使用gulp-cssnano
• 转码less   使用gulp-less
• 转码sass  使用gulp-sass 错误处理 : 在下载gulp-sass的时候, 发现 node-sass存在github的某一个仓库, 那个地址 被墙, 需要单独先下载node-sass  具体命令如下npm i node-sass -g  npm i node-sass --save-dev, 再去下载gulp-sass就可以了!
• 压缩html  使用gulp-htmlmin 去掉注释, 去掉属性值的引号, 去掉type=”text/javascript”
• 自动完成以上任务  使用gulp.watch
• 浏览器同步  使用 browser-sync  修改同步选项  登录 localhost:3001

三.下面附gulpfile.js配置代码,注意修改文件路径:

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var Cssnano = require('gulp-cssnano');
var less = require('gulp-less');
var sass = require('gulp-sass');
var htmlmin = require('gulp-htmlmin');
var browserSync = require('browser-sync').create();

gulp.task('concat-uglify-js', function() {
      gulp.src('./src/js/*.js')
        .pipe(concat('js.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js/'));
});
gulp.task('cssnano', function() {
      gulp.src('./src/styles/*.css')
        .pipe(Cssnano())
        .pipe(gulp.dest('./dist/styles/'));
});
gulp.task('less', function() {
    gulp.src('./src/styles/*.less')
      .pipe(less())
      .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/'));
});
gulp.task('sass',function(){
    gulp.src('./src/styles/*.scss')
      .pipe(sass())
      .pipe(Cssnano())
      .pipe(gulp.dest('./dist/styles/'));
});
gulp.task('minify', function() {
    gulp.src('src/*.html')
      .pipe(htmlmin({
        collapseWhitespace: true, //  折叠对文档树中的文本节点有贡献的空白空间,不可缺
        removeAttributeQuotes: true, //尽可能删除属性的引号
        removeScriptTypeAttributes: true, //从script标签中移除 其他type属性值保持不变
        minifyJS: true, //缩小脚本元素和事件属性中的JavaScript（使用UglifyJS）
        removeComments :true //剥离HTML注释
      }))
      .pipe(gulp.dest('./dist/'))
      .pipe(browserSync.reload({
        stream:true
      }));
});
gulp.task('copy', function() {
  // 将你的默认的任务代码放在这
      gulp.src("./src/*.html")
          .pipe(gulp.dest("./dist"));
});
gulp.task('autogulp',function(){
    gulp.watch('./src/js/*.js',['concat-uglify-js']);
    gulp.watch('./src/styles/*.sass',['sass']);
    gulp.watch('./src/*html',['minify']);
});
gulp.task('browser-sync',function(){
    browserSync.init({
      server:{
        baseDir:"./dist"
      }  
    });
    gulp.watch('./src/js/*.js',['concat-uglify-js']);
    gulp.watch('./src/styles/*.sass',['sass']);
    gulp.watch('./src/*html',['minify']);
});