gulp

Posted 2020-09-04

1.安装全局gulp：
      npm install --global gulp
   2.安装项目依赖：
      npm install --save-dev gulp
   3.在项目根目录下创建文件名字为：gulpfile.js
   4.配置当前gulpfile.js文件
   5.执行gulp测试


   语法：
   1.gulp.src:方法读取你需要操作的文件
   2.gulp.dest:方法用来写文件
   3.gulp.task:方法用来定义任务的
   4.gulp.watch:监听当前文件发生变化的


   (1):js文件压缩
      使用gulp-uglify
      安装：npm install --save-dev gulp-uglify
   (2):css文件压缩
      使用gulp-minify-css
      安装：npm install --save-dev gulp-minify-css
   (3):html文件压缩
      使用：gulp-minify-html
      安装：npm install --save-dev gulp-minify-html
   (4):代码检查工具jshint
      使用：gulp-jshint
      安装：npm install --save-dev gulp-jshint
   (5):文件合并
      gulp-concat
   (6):重命名：
      gulp-rename
   (7):less：gulp-less  gulp-sass
   (8):自动刷新：
      gulp-livereload

*/

//将gulp导入
var gulp = require(‘gulp‘);
uglify = require("gulp-uglify");
minifyCss = require("gulp-minify-css");
minifyHtml = require("gulp-minify-html");
jsHint = require("gulp-jshint");
concat = require("gulp-concat");
rename = require("gulp-rename");

//压缩js文件任务
gulp.task("minify-js",function(){
   gulp.src("getInfo.js")  //操作文件
      .pipe(uglify())     //执行相应任务
      .pipe(gulp.dest("dist/"));  //将压缩之后的文件输出到哪里
});

//压缩all.js文件
gulp.task("minify-js-all",function(){
   gulp.src("js/*.js")
      .pipe(uglify())
      .pipe(gulp.dest("dist/js"));
});

//压缩css文件
gulp.task("minifyCss",function(){
   gulp.src("css/*.css")
      .pipe(minifyCss())
      .pipe(gulp.dest("dist/css"));
});

//压缩html文件
gulp.task("minifyHtml",function(){
   gulp.src("*.html")
      .pipe(minifyHtml())
      .pipe(gulp.dest("dist/"));
})

//代码检查
gulp.task("jsHint",function(){
   gulp.src("js/*.js")
      .pipe(jsHint())
      .pipe(jsHint.reporter());
})


//合并任务
gulp.task("concat",function(){
   gulp.src("js/*.js")
      .pipe(concat("all.js"))
      .pipe(gulp.dest("dist/js"));
})

//合并，压缩，重命名
gulp.task("fjs",function(){
   return gulp.src("js/*js")
            .pipe(concat("main.js"))
            .pipe(gulp.dest("dest/js"))
            .pipe(rename({suffix:".min"}))
            .pipe(uglify())
            .pipe(gulp.dest("dests/"));
});

//less编译
gulp.task("less",function(){
   gulp.src("less/*.less")
      .pipe()
      .pipe(gulp.dest("dist/css"));
})

// 配置任务
gulp.task(‘default‘, function() {
   // console.log("Hello gulp");
   gulp.start("minify-js-all","minifyCss","minifyHtml","jsHint","concat","fjs");   //执行压缩任务
});