gulp自动化构建工具使用

gulpfile.js:
var gulp = require("gulp");
var imagemin = require("gulp-imagemin");//压缩图片插件
var uglify = require("gulp-uglify");   //js压缩插件
var sass = require("gulp-sass");      //sass转换为css插件
var concat = require("gulp-concat"); //代码合并插件
-----------------------------------------------------------------------
gulp能做什么:（下面是罗列最基本的）
-----------------------------------------------------------------------
1...压缩代码
2...合并代码
3...压缩图片
4...sass转换
-----------------------------------------------------------------------
原理：
1...gulp是基于nodejs的数据流
2...gulp主要使用pipe事件输入输出
3...插件独立使用
-----------------------------------------------------------------------
优势：
1...gulp是基于代码进行配置
2...gulp的可读性更高
3...gulp基于数据流，所以可以操作pipe（）事件
-----------------------------------------------------------------------
安装
cnpm install gulp -g
-----------------------------------------------------------------------
npm init
一直回车；
gulpfile.js 和packjson.js同级
-----------------------------------------------------------------------
常用的方法：
gulp.task     //定义任务
gulp.src     //找到需要执行任务的文件
gulp.dest   //执行任务的文件的去处
gulp.watch //观察问是否发生变化

//定义默认任务
gulp.task("default",function(){
   return console.log("这是默认任务,只需要执行gulp")
})
//执行任务cmd 命令行gulp
-----------------------------------------------------------------------
gulp.task("message",function(){
   return console.log("这是制定任务")
})
//执行任务cmd 命令行gulp message
-----------------------------------------------------------------------
//拷贝文件
gulp.task("copyHtml",function(){
   gulp.src("src/*.html")             //src所有html
    .pipe(gulp.dest("dist"))     //输送到dist文件夹下
})
//执行任务cmd 命令行gulp copyHtml 这样就完成了文件拷贝
-----------------------------------------------------------------------
//图片压缩
cnpm i gulp-imagemin
gulp.task("imageMin",function(){
   gulp.src("src/images/*")                //src/images所有的东西
    .pipe(imagemin())                   //调用上面的方法
    .pipe(gulp.dest("dist/images"))  //输送到dist/images文件夹下
})
//执行任务cmd 命令行gulp imageMin 这样就完成了图片压缩
-----------------------------------------------------------------------
//压缩js文件
cnpm i gulp-uglify
gulp.task("minify",function(){
   gulp.src("src/js/*.js")                 //src/js所有的js
    .pipe(uglify())               //调用上面的方法
    .pipe(gulp.dest("dist/js"))      //输送到dist/js文件夹下
})
//执行任务cmd 命令行gulp minify 这样就完成了js压缩；
-----------------------------------------------------------------------
//sass转换为css
cnpm i gulp-sass
gulp.task("sass",function(){
   gulp.src("src/sass/*.scss")                    //src/sass所有的scss文件
    .pipe(sass().on("erro",sass.logError))   //调用上面的方法,并且打印错误；
    .pipe(gulp.dest("dist/css"))            //输送到dist/css文件夹下
})
//执行任务cmd 命令行gulp sass 这样就完成了sass转换为css；
-----------------------------------------------------------------------
//代码合并
cnpm i gulp-concat
gulp.task("concatScripts",function(){
   gulp.src("src/js/*.js")                 //src/js所有的js
    .pipe(concat("main.js"))          //合并之后的文件名；
    .pipe(uglify())                  //压缩js；如果这里做了合并代码的操作可以不用单独压缩js文件
    .pipe(gulp.dest("dist/js"))      //输送到dist/js文件夹下
})
//执行任务cmd 命令行concatScripts
-----------------------------------------------------------------------
//监听文件是否变化
gulp.task("watch",function(){
  gulp.watch("src/js/*.js",["concatScripts"]);
  gulp.watch("src/images/*",["imageMin"]);
  gulp.watch("src/sass/*.scss",["sass"]);
  gulp.watch("src/js/*.html",["copyHtml"]);
})
//执行任务cmd 命令行gulp watch
-----------------------------------------------------------------------
//执行多个任务
gulp.task("default",[任务一，任务二，任务三....])
//执行任务cmd 命令行gulp

原文地址：https://www.cnblogs.com/lhl66/p/8667221.html