gulp安装那些事

在Gulp中，使用的是Nodejs中的 stream (流)，首先获取到需要的stream，然后可以通过stream的pipe()方法把流导入到你想要的地方，比如Gulp的插件中，经过插件处理后的流又可以继续导入到其他插件中，当然也可以把流写入到文件中。所以Gulp是以stream为媒介的，它不需要频繁的生成临时文件，这也是Gulp的速度比Grunt快的一个原因。

1、安装gulp

1.1 完成后运行全局gulp安装

npm install -g gulp

1.2 切换到项目中，进行局部安装一次，并运行

npm install gulp，如果想在安装时把gulp写进项目的package.json文件的依赖中，需要提前在项目里新建一个package.json文件(文件名称必须叫package.json和gulpfile.js，请叫我严肃脸)。

然后运行命令时，加上--sav-dev 就可以了

npm install --save-dev gulp

1.2.1 在项目中，gulp构建后自动添加版本号

但是由于公司发布系统限制，如果用右面方法实现，每次更新都会积压过多过期无用的文件，我们预期效果是:左边的文件格式，添加版本号；

1. 分别安装gulp-rev、gulp-rev-collerctor
   npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector

2. 打开node_modules\gulp-rev\index.js

   第144行 manifest[originalFile] = revisionedFile;
   更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;

3. 打开node_modules\rev-path\index.js

   10行 return filename + '-' + hash + ext;
   更新为: return filename + ext;

4. 打开node_modules\gulp-rev-collector\index.js

   31行 if ( path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) {
   更新为: if ( path.basename(json[key]).split('?')[0] !== path.basename(key) ) {

1.3 关于gulp安装与环境变量配置,及安装不成功的原因

运行N遍都提示“ 'gulp'不是内部或者外部命令，也不是可运行的程序或批处理文件 ”

node与npm都安装正确，但gulp -v时确一直提示不是内部名外部命令....

最后查了N次发现是系统变量配置错误。

首先检查npm prefix

npm config get prefix

这个应该是系统变量中的path的配置；

D:\softwares\Node\node_global; 这个地址是要添加到系统变量中的。如下

高级系统设置

选中path配置，双击或点击编辑

在路径中添加node的根目录与刚才prefix的路径；

记得每个路径结束位置加上分号，再接下条链接

D:\softwares\Node\;D:\softwares\Node\node_global;

NODE_PATH

2、gulp使用方法

2.1 新建gulpfile.js(必须使用这个名字)

在项目中再创建一个gulpfile.js文件，里边可以定义一些方法。

假设gulpfile.js文件中有个default的任务，接下来运行：gulp+task名称

gulp default

会输出default的内容。

并以Finished结束

3、gulp常用插件

3.1 接下来安装及在gulpfile.js文件中配置一些常用的插件

插件的安装方式：

npm install --global xxx 全局安装

npm install xxx --save-dev 本地安装

优缺点如下：

安装方式	缺点	优点
--global	安装会造成很多冗余插件，浪费空间；	只需要安装一次
--save-dev	每个项目都需要重新安装	减少空间， 直接写入package.json

因为在使用 --global 参数的时候 --save 或 --save-dev参数是无效的。

这样就带来一个问题。此时 package.json 中的 dependencies, devDependencies 将无法享受到npm自动更新带来的便利，不使用dependencies, devDependencies 字段对我们的项目管理来说是不可接受的。

项目中调取的插件是从package.json中查看的，如果没有--save-dev，则不会在package.json中依赖注入dependencies。

http://www.cnblogs.com/2050/p/4198792.html

这篇文章插件写的挺详细的。

自动加载插件

npm install --save-dev gulp-load-plugins

重命名

npm install --save-dev gulp-rename

var rename  =  require("gulp-rename");

// rename via string 

gulp.src("src/hello.txt")

  .pipe(rename("main/goodbye.md"))

  .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/goodbye.md 

js文件压缩

npm install --save-dev gulp-jsmin

var jsmin  =  require('gulp-jsmin');

var rename  =  require('gulp-rename');

gulp.task('default', function () {

    gulp.src('src/**/*.js')

        .pipe(jsmin())

        .pipe(rename({suffix :  '.min'}))

        .pipe(gulp.dest('dist'));

});

npm install --save-dev gulp-uglify

npm install --save-dev pump

var gulp  =  require('gulp');

var uglify  =  require('gulp-uglify');

var pump  =  require('pump');

gulp.task('compress', function (cb) {

  pump([

        gulp.src('lib/*.js'),

        uglify(),

        gulp.dest('dist')

    ],

    cb

  );

});

css文件压缩

npm install --save-dev gulp-minify-css

npm install --save-dev gulp-cssmin

var gulp  =  require('gulp');

var cssmin  =  require('gulp-cssmin');

var rename  =  require('gulp-rename');

gulp.task('default', function () {

    gulp.src('src/**/*.css')

        .pipe(cssmin())

        .pipe(rename({suffix :  '.min'}))

        .pipe(gulp.dest('dist'));

});

 html文件压缩

npm install --save-dev gulp-html-minify

npm i gulp-htmlmin --save-dev

npm install gulp-processhtml --save-dev

var htmlminify = require("gulp-html-minify");

gulp.task('build-html' , function(){

    return gulp.src("./html-init/**/*.html")

        .pipe(htmlminify())

        .pipe(gulp.dest("./html"))

});

 js代码检查

npm install --save-dev gulp-jshint

npm install --save-dev jshint-stylish

var jshint  =  require('gulp-jshint');

gulp.task('lint', function() {

   return  gulp.src('js/*.js')

    .pipe(jshint())

    .pipe(jshint.reporter('YOUR_REPORTER_HERE'));

});

gulp.task('default', () =>

    gulp.src(['file.js'])

        .pipe(jshint('.jshintrc'))

        .pipe(jshint.reporter('jshint-stylish', {beep :  true}))

);

混淆JS代码

npm install --save-dev gulp-obfuscate

var gulp  =  require('gulp');

var obfuscate  =  require('gulp-obfuscate');

 

gulp.task('default', function () {

     return  gulp.src('test.js')

        .pipe(obfuscate());

});

文件合并

npm install --save-dev gulp-concat

var concat  =  require('gulp-concat');

gulp.task('scripts', function() {

   return  gulp.src('./lib/*.js')

    .pipe(concat('all.js'))

    .pipe(gulp.dest('./dist/'));

});

 less和sass的编译

npm install --save-dev gulp-less

npm install --save-dev gulp-sass

//压缩合并css, css中既有自己写的.less, 也有引入第三方库的.css

gulp.task('lessmin', function (done) {

gulp.src(['src/css/main.less', 'src/css/*.css'])

.pipe(less())

//这里可以加css sprite 让每一个css合并为一个雪碧图

//.pipe(spriter({}))

.pipe(concat('style.min.css'))

.pipe(gulp.dest('dist/css/'))

.on('end', done);

});

图片压缩

npm install --save-dev imagemin-pngquant

var imagemin  =  require('imagemin');

var imageminPngquant  =  require('imagemin-pngquant');

imagemin(['images/*.png'], 'build/images', {use :  [imageminPngquant()]}).then(() => {

    console.log('Images optimized');

});

npm install --save-dev gulp-imagemin

var imagemin  =  require('gulp-imagemin');

gulp.task('default', () =>

    gulp.src('src/images/*')

        .pipe(imagemin())

        .pipe(gulp.dest('dist/images'))

);

运行顺序

npm install --save-dev run-sequence

按顺序执行

var runSequence  =  require('run-sequence');

gulp.task('build', function (done) {

runSequence(

['delRevCss'],

['revJs'],

['js'],

['css'],

['html'],

['imagemin'],

done);

});

逻辑代码

npm install --save-dev gulp-if

var gulpif  =  require('gulp-if');

var uglify  =  require('gulp-uglify');

var condition  =  true; // TODO: add business logic 

gulp.task('task', function() {

  gulp.src('./src/*.js')

    .pipe(gulpif(condition, uglify()))

    .pipe(gulp.dest('./dist/'));

});

给资源加时间戳

npm install --save-dev gulp-rev-collector

清除版本号缓存

npm install --save-dev gulp-rev

var rev  =  require('gulp-rev');

gulp.task('default', function () {

     return  gulp.src('src/*.css')

        .pipe(rev())

        .pipe(gulp.dest('dist'));

});

删除当前目录中的build文件夹

npm install --save-dev del

var del  =  require('del');

del(['tmp/*.js', '!tmp/unicorn.js']).then(paths => {

    console.log('Deleted files and folders:\n', paths.join('\n'));

});

4、gulp常用API

gulp.task() gulp.src() gulp.dest() gulp.watch()

具体可查看官方文档

https://github.com/gulpjs/gulp/blob/master/docs/API.md

//使用数组的方式来匹配多种文件

4.1 gulp.src();

用来获取流的,方法输入1个glob(比如匹配一个或多个文件的字符串，或者数组)

然后返回一个可以传递给插件的数据流。

gulp.src(globs[, options])gulp.src(['js/*.js','css/*.css','*.html'])

!js/app.js 从匹配结果中排队js/app.js

    *.+(js|css) 匹配根目录下所有后缀为.js或者.css的文件
    * 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾
    ** 匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。
    ? 匹配文件路径中的一个字符(不会匹配路径分隔符)
    [...] 匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法
    ! 匹配任何与括号中给定的任一模式都不匹配的
    ?匹配括号中给定的任一模式0次或1次，类似于js正则中的
    + 匹配括号中给定的任一模式至少1次，类似于js正则中的
    *匹配括号中给定的任一模式0次或多次，类似于js正则中的
    @匹配括号中给定的任一模式1次，类似于js正则中的

排除模式，在数组中的单个匹配模式前加上!即是排除模式

不能在数组中的第一个元素中使用排除模式

gulp.src([*.js,'!b*.js']) //匹配所有js文件，但排除掉以b开头的js文件gulp.src(['!b*.js',*.js]) //不会排除任何文件，因为排除模式不能出现在数组的第一个元素中

4.2 gulp.dest();

gulp.dest(path[,options])

是用来写文件的

var gulp = require("gulp");

gulp.src("script/jquery.js")

.pipe(gulp.dest("dist/foo.js"));

//最终生成文件的路径为 dist/foo.js/jquery.js

解析：gulp.dest(path)生成的文件路径是我们传入的path参数后面再加上

gulp.src()中通配符开始出现的那部分路径

gulp.src('app/src/**/*.css') //此时base的值为app/src,也就是说它的base路径为app/src//设该模式匹配到了文件 app/src/css/normal.css.pipe(gulp.dest('dist')) //用dist替换掉base路径，最终得到 dist/css/normal.css

gulp.src(script/lib/*.js, {base:'script'}) //配置了base参数，此时base路径为script//假设匹配到的文件为script/lib/jquery.js.pipe(gulp.dest('build')) //此时生成的文件路径为 build/lib/jquery.js

4.3 gulp.task();

是用来定义任务的

gulp.task(name[, deps], fn)；

deps是当前定义的任务需要依赖的其他任务，为一个数组。

当定义一个简单的任务时，需要传入任务名字和执行函数两个属性；

gulp.task('default',function(){

console.log("hi~");

});

也可以指定一个任务build执行css,js,imgs这三个任务，可以指定数组来完成。

gulp.task('build', ['css', 'js', 'imgs']);

这些任务不是按顺序执行的，可以将函数和数组结合起来指定依赖关系.

ex:定义一个css任务，在执行前检查greet任务是否已经执行完毕。

gulp.task('css', ['greet'],function(){ ...... });

此时，当执行css任务时，gulp会先执行greet任务，然后在它结束后再调用定义的css函数。

也可以定义在gulp开始运行的时候默认执行的任务

gulp.task('default',function(){ ...... });

gulp.task('one',function(){ //one是一个异步执行的任务 setTimeout(function(){ console.log('one is done') },5000);});//two任务虽然依赖于one任务,但并不会等到one任务中的异步操作完成后再执行gulp.task('two',['one'],function(){ console.log('two is done');});

4.4 gulp.watch();

gulp.watch(glob[, opts], tasks)

用来监视文件的变化，当文件发生变化后，利用它来执行相应的任务。

延伸：

基于node的扩展

在sublime中安装SublimeLinter进行js & css代码校验

一、安装SublimeLinter：

1、按下 Ctrl+Shift+p 进入 命令模式（Command Palette）

2、输入pci

3、输入SublimeLinter，进行安装。

4、安装完成以后，出现如下界面：

二、安装SublimeLinter-jshint

1、按下 Ctrl+Shift+p 进入 命令模式（Command Palette）

2、输入pci

3、输入SublimeLinter-jshint，进行安装。

 4、出现如下结果，则说明安装完成，输入  jshint -v可查看安装的jshint版本。

5、现在使用 Sublime Text 编辑 JavaScript 文件，就会有语法检查了！在行号的左侧会有黄色/红色的小圆点提示语法错误，将光标定位到错误的代码里，底部的状态栏会显示错误原因。

三、关于CSS代码检查：

csslint的安装方法与jshint一致，只需要在sublime text 3的package control中再安装SublimeLinter-csslint，然后在命令行中以下代码安装csslint即可。

1	npm install -g csslint

输入 csslint --version可查看安装的csslint版本。

现在使用 Sublime 编辑CSS、JS文件都有自动拼写检查了。