初探gulp[学习笔记1]

[stuxt]

初探gulp[学习笔记1]

2016-02-16 小天同学

gulp是一个很方便的自动化构建工具，可以增强你的工作流程！同类的工具还有grunt等。但是gulp是一种基于流的自动化构建工具。

gulp的主要优势为：

1. 易于使用
   通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
2. 构建快速
   利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
3. 插件高质
   Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
4. 易于学习
   通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

初探笔记

和grunt相比gulp的优势都在上面了，入门也是很简单的最少的API，随着社区的壮大插件也在不断的层出不穷，从而用起来适用的场景也更加广泛。

全局安装 gulp 是为了可以运行命令行， 而项目中得 gulp 是为了项目脚本依赖。 一般命令行工具都会全局安装，项目中用到的类库还是建议跟着项目走，这样每个项目可以使用自己的空间存放依赖列表，而不会造成全局污染和版本冲突。别人拿到你项目的时候，直接 npm install 就可以安装所有依赖，并立刻执行了。

所以gulp在使用过程中还是要跟着项目走，单独安装到项目目录下，方便插件等的管理。

[stuxt]

• Gulp官网
• Gulp中文网

[stuxt]

目前已在公司项目中使用gulp来作为基本的构建工具。
准备扩展Gulp＋web pack的方式，来实现项目的打包。

[stuxt]

'use strict';
var gulp = require("gulp");
//引入依赖
var rev = require("gulp-rev"),//生成文件md5码
    revReplace = require("gulp-rev-collector"),//引用替换
    changed = require("gulp-changed"),//判断文件是否变化
    minifycss = require("gulp-clean-css"),//css压缩
    concat = require("gulp-concat"),//文件合并
    rename = require("gulp-rename"),//文件重命名
    jshint = require("gulp-jshint"),//js检验
    minijs = require("gulp-uglify"),//js压缩
    plumber = require('gulp-plumber');//错误信息提示
 
 
// css压缩、重命名、合并
gulp.task('css-mini',['getDate'], function() {
  return gulp.src('css/**/*.css',{ base: 'css' })//输入文件路径
    // .pipe(concat("index.min.css"))
    .pipe(changed('minicss'))
    .pipe(rename({ suffix: '_'+DateVersion }))
    .pipe(plumber())
    .pipe(minifycss({
            advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
            compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
            keepBreaks: false,//类型：Boolean 默认：false [是否保留换行]
            keepSpecialComments: '*' //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
        }))//压缩css文件
    .pipe(gulp.dest('minicss'));//文件输出路径
});
 
 
// js校验、压缩、重命名、合并
gulp.task('js', function() {
  return gulp.src('js/**/**.js',{ base: 'js' })//输入文件路径
    //.pipe(concat("index.min.js"))
    //.pipe(rename({ suffix: '.min' }))
    .pipe(plumber())
    //.pipe(jshint())
    //.pipe(jshint.reporter('default'))//输出错误报告
    .pipe(minijs({
            mangle: false,//类型：Boolean 默认：true 是否修改变量名
            compress: false,//类型：Boolean 默认：true 是否完全压缩
            // preserveComments: 'all' //保留所有注释
        }))//压缩js文件
    .pipe(gulp.dest('minijs'));//文件输出路径
});
 
 
//默认执行的任务并启动监控
gulp.task('default', ['js', 'css-mini'], function(){
    var jsWatch = gulp.watch('js/**/*.js',['js']);
    var cssWatch = gulp.watch('css/**/*.css',['css-mini']);
    jsWatch.on('change', function(event) {
      console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
    cssWatch.on('change', function(event) {
      console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
});

[stuxt]

 {
  "name": "minifile",
  "version": "1.0.0",
  "description": "文件压缩工程",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-changed": "^1.3.0",
    "gulp-jshint": "^2.0.1",
    "gulp-concat": "^2.6.0",
    "gulp-clean-css": "^2.0.11",
    "gulp-plumber": "^1.1.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-rev": "^7.1.0",
    "gulp-rev-collector": "^1.0.5",
    "gulp-uglify": "^1.5.4",
    "jshint": "^2.9.2"
  },
  "devDependencies": {},
  "scripts": {
    "test": "gulp"
  },
  "keywords": [
    "压缩",
    "css",
    "js"
  ],
  "author": "chenyajun",
  "license": "MIT"
}