gulp 使用初解

2019独角兽企业重金招聘Python工程师标准>>>

#gulp

gulp是基于Node.js的前端自动化构建工具，主要用于代码打包。目前主流的前端打包工具，grunt，gulp，webpack。grunt现在似乎慢慢被gulp取代，而我使用gulp也是冲着大家说的配置简单去的，至于通道流，运行文件什么的其实还是次要的；webpack现在很火，听说功能强大，没有用过。

npm install gulp -g

注意需要在npm全局中安装gulp，否则命令窗口中找不到gulp快捷命令，记得检查环境变量的配置情况。

##gulp 插件

gulp的使用离不开gulp插件的使用，下面是常用的几款。

npm install del gulp gulp-concat gulp-minify-css gulp-replace gulp-uglify gulp-rev gulp-rev-collector --save-dev del 和 gulp-clean del是node.js的插件，两者的效果相似，都是用来清除文件。至于为什么使用 del，而不是 gulp-clean，我是看到网上一篇文章推荐的。

• gulp-concat

  gulp-concat用来做文件合并，可以将多个文件合并成一个文件，减少静态资源数量。

• gulp-minify-css

  gulp-minify-css是css的压缩工具。

• gulp-uglify

  gulp-uglify是js的压缩工具。官方文档上是这么写的 “Minify files with UglifyJS.”

• gulp-replace

  gulp-replace是一个文本修改插件，我们一般用来做文件内容的的修改，常用的是路径修改。

• gulp-rev和gulp-rev-collector

  gulp-rev和gulp-rev-collector，并没有用到，这里只做标示。这两个插件可以用来处理文件名，同时生成一个json文件保存修改前的文件名和修改后的文件名，并且自动处理文件中的修改，例如图片文件至于css文件。

##gulp的配置文件gulpfile.js

gulp依赖于配置文件gulpfile.js，在运行目录下需要手动创建gulpfile.js，gulp的任务执行代码会调用gulpfile.js。

##gulp 语法

gulp的语法很简单，功能实现依赖于各种插件，所以学习上成本很低。gulp的语法其实就是是nodejs的语法。

###配置gulpfile

//声明依赖的插件
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var del = require('del');
var replace = require('gulp-replace');
//定义task
gulp.task('taskName', function() {

});

//default是默认task，当命令行缺省调用时会执行default任务。
gulp.task('default', [])

###命令行调用task

#直接调用具体的task
gulp taskName 
#调用默认的default，如果没用会报错
gulp

###例子

//多个任务合并
gulp.task('default', ['task1', 'task2', 'task3', 'task4']);

//文件拷贝语法
gulp.src("oldPath/images/*.*")
    .pipe(gulp.dest(newPath+'/images'));
    
//文件合并且压缩语法
//css文件
gulp.src(['app/assets/styles/style.css',
          'app/assets/styles/public.css',
          'app/assets/styles/page.css',
          'app/assets/styles/jquery-ui-1.10.3.css'])
    .pipe(concat('style.css'))
    .pipe(minifycss())
    .pipe(gulp.dest(newPath));
//js文件
gulp.src([
        'app/components/*/*.js'
    ])
    .pipe(concat('components.js'))
    .pipe(uglify())
    .pipe(gulp.dest(newPath));
//文本修改
gulp.task('demo-replace', function(){
    gulp.src(demoDir+'/index.html')  
      .pipe(replace('<link rel="stylesheet">', ''))  //删除
      .pipe(replace(/\.\.\/assets\//g, ''))                //正则替换
      .pipe(replace(/\.\.\/images/g, 'images'))  
      .pipe(gulp.dest(newPath));
//目录清理
gulp.task('clean', function(cb){
    del(rootPath, cb);
});

作者：http://my.oschina.net/u/924762/blog/628510?fromerr=0sUJ8B33

转载于:https://my.oschina.net/destroy001/blog/629918