gulp初体验

项目流程

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

常用命令简介：

node -v 查看node版本
npm -v 查看npm版本
cd 定位到目录，用法：cd + 路径 ；
dir 列出文件列表；
cls 清空命令提示符窗口内容

安装包
npm install <name> [-g] [--save-dev]
-g：全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量；  非全局安装：将会安装在当前定位目录；  全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用；
--save：将保存配置信息至package.json（package.json是nodejs项目配置文件）；
-dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；
为什么要保存至package.json？因为node插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可（命令提示符执行npm install，则会根据package.json下载所有需要的包）。

安装指定版本包
npm install -g npm@3.5

更新插件
npm update <name> [-g] [--save-dev]

删除插件
npm uninstall <name> [-g] [--save-dev]

生成package.json
npm init

安装本地插件
npm install [name] --save-dev

---

以下为测试“gulp-livereload”浏览器自动刷新代码：

谷歌浏览器或火狐安装livereload插件(必须此插件方能生效)
安装方法：谷歌浏览器安装crx插件方法、火狐浏览器直接将xpi文件拖进浏览器即可安装。点击下载（谷歌为.crx文件，火狐为.xpi文件）

注：安装方法在chrome测试通过，firefox安装时提示未通过验证，不支持IE。

package.json

 {
   "name": "myapp",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "gulp": "^3.9.1",
     "gulp-livereload": "^3.8.1"
   }
 }

gulpfile.js

 // 监听all变化
 var gulp = require('gulp'), //本地安装gulp所用到的地方
     livereload = require('gulp-livereload');
 gulp.task('All', function() {
     gulp.src('src/**')
         .pipe(livereload());
 });
 gulp.task('watchAll', function() {
     livereload.listen();
     gulp.watch('src/**', ['All']);
 });
 //gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数
 //gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组)
 //gulp.dest(path[, options]) 处理完后文件生成路径

cd到当前目录，执行命令“gunp watchAll”。

运行项目http://localhost/....，注意，必须使用http[s]协议，file协议不生效。

当修改src目录里面文件时，浏览器会自动刷新。

现项目中使用的gulpfile.js

 var gulp = require("gulp")
     , gutil = require("gulp-util")

     , del = require("del")
     , sass = require("gulp-sass")
     , uglify = require('gulp-uglify')
     , rename = require("gulp-rename")

     , browserSync = require("browser-sync").create()
     , reload = browserSync.reload

     , sequence = require("run-sequence")
     , plumber = require("gulp-plumber")
     , watch = require("gulp-watch")

     , through2 = require("through2")
     , path = require("path")
     , fs = require("fs");

 // #############################################
 // # init params

 // 收集参数
 var cwd = process.cwd();
 var cmdargs = process.argv.slice(2);
 var cmdname = cmdargs.shift();
 var cmdopts = {};
 var srcpath = "./src";
 var distpath = "./dist";

 while (cmdargs.length) {
     var key = cmdargs.shift().slice(2);
     var val = cmdargs.shift();
     cmdopts[key] = key === "src" || key === "dist" ? normalizePath(val) : val;
 }

 // 参数配置
 var release = cmdname === "release";
 var reloadTimer = null;
 var devport = 5678;
 var paths = {
     src: path.join(__dirname, srcpath),
     dist: path.join(__dirname, distpath)
 }

 function normalizePath(url) {
     if (url.charAt(0) === "/" || url.indexOf(":") > -1) {
         return path.normalize(url);
     }
     return path.normalize(path.join(cwd, url));
 }

 function setOptions(cmd, cmdopts) {
     if (cmd === "start") {
         paths.src = cmdopts.src ? path.join(cmdopts.src, srcpath) : paths.src;
     } else if (cmd === "release") {
         paths.src = cmdopts.src ? path.join(cmdopts.src, srcpath) : paths.src;
         paths.dist = cmdopts.dist ? cmdopts.dist : path.normalize(paths.src + "/../" + distpath);
     }
 }

 function showUsage() {
     console.log("Usage:\n");
     console.log("     gulp                   显示帮助");
     console.log("     gulp help              显示帮助");
     console.log("     gulp start --src src   在--src目录下自动化开发调试环境");
     console.log("     gulp release --src src --dist dist 构建--src线上版本到--dist目录\n");
     console.log("     gulp start --src src --proxy localhost   使用gulp代理localhost请求，并且实时监听src文件修改");
 }

 // #############################################
 // # default tasks

 // # clean path
 gulp.task("clean:dist", function () {
     return del([paths.dist], {force: true});
 });

 // # 编译css
 gulp.task("sass", function() {
     var base = paths.src;
     var dest = base;
     return gulp.src(base + "/**/*.scss", {base: base})
         .pipe(plumber())
         .pipe(sass({
             precision: 2,
             outputStyle: release ? "compressed" : "expanded"
             //sourceComments: release ? false : true
         })
         .on("error", sass.logError))
         .pipe(gulp.dest(dest));
 });

 // # 压缩js
 gulp.task("uglify", function() {
     var base = paths.src;
     var dest = paths.dist;
     return gulp.src(base + "/**/*.js", {base: base})
         .pipe(plumber())
         .pipe(uglify())
         .pipe(gulp.dest(dest));
 });

 // # 复制静态资源
 gulp.task("copy:dist", function() {
     var base = paths.src;
     var dest = paths.dist;
     return gulp.src([
             base + "/**/*",
             "!" + base + "/**/*.js",
             "!" + base + "/**/*.scss"
         ], {base: base})
         .pipe(gulp.dest(dest));
 });

 // # serv & watch
 gulp.task("server", function() {
     // start server
     browserSync.init({
         ui: false,
         notify: false,
         port: devport,
         // 设置代理请求
         proxy: cmdopts.proxy,
         server: !cmdopts.proxy ? {
             baseDir: paths.src
         } : false
     });

     // # watch src资源, 调用相关任务预处理
     watch(paths.src + "/**/*.scss", function(obj) {
         sequence("sass");
     });

     // # 刷新浏览器
     // # 限制浏览器刷新频率
     watch(paths.src + "/**/*", function(obj) {
         var url = obj.path.replace(/\\/g, "/");
         var absurl = url;
         url = path.relative(paths.src, url);
         console.log("[KS] " + absurl);

         // skip scss
         if (!/\.scss$/.test(url)) {
             if (reloadTimer) {
                 clearTimeout(reloadTimer);
             }
             reloadTimer = setTimeout(reload, 1000);
         }
     });
 });

 // #############################################
 // # public task

 gulp.task("default", showUsage);
 gulp.task("help", showUsage);

 gulp.task("start", function(cb) {
     release = false;
     setOptions("start", cmdopts);
     sequence("sass", "server", cb);
 });

 gulp.task("release", function(cb) {
     release = true;
     setOptions("release", cmdopts);
     sequence("clean:dist", ["sass", "uglify"], "copy:dist", cb);
 });

package.json

 {
   "name": "work",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "autoprefixer": "^6.3.6",
     "autoprefixer-core": "^6.0.1",
     "browser-sync": "^2.13.0",
     "cssgrace": "^3.0.0",
     "cssnext": "^1.8.4",
     "del": "^2.2.1",
     "fs": "^0.0.2",
     "gulp": "^3.9.1",
     "gulp-concat": "^2.6.0",
     "gulp-htmlmin": "^2.0.0",
     "gulp-imagemin": "^3.0.1",
     "gulp-jshint": "^2.0.1",
     "gulp-less": "^3.1.0",
     "gulp-livereload": "^3.8.1",
     "gulp-minify-css": "^1.2.4",
     "gulp-notify": "^2.2.0",
     "gulp-plumber": "^1.1.0",
     "gulp-postcss": "^6.1.1",
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^2.3.2",
     "gulp-uglify": "^1.5.3",
     "gulp-util": "^3.0.7",
     "gulp-watch": "^4.3.8",
     "imagemin-jpegtran": "^5.0.2",
     "imagemin-pngcrush": "^5.0.0",
     "jshint": "^2.9.2",
     "path": "^0.12.7",
     "run-sequence": "^1.2.1",
     "through2": "^2.0.1"
   }
 }