Gulp实战

推荐文章：

gulp.js中文网   :     http://www.gulpjs.com.cn/

DBPOO           ：   http://www.dbpoo.com/getting-started-with-gulp/

Ooo_My_God  ：   http://www.ydcss.com/archives/424

w3cplus          ：    http://www.w3cplus.com/blog/tags/511.html

demo截图:

讲一下目录结构：

c\ 文件夹为发布css文件夹(css简写);

i\ 文件夹为发布img文件夹(img简写);

j\ 文件夹为发布js文件夹(js简写);

src\ 生产环境下的文件

config.js 为gulp里路径配置的文件(可不写)

gulpfile.js 为gulp配置文件

package.json node安装配置文件

总文件夹：

生产文件夹：

package.json:

 {
   "name": "test-gulp2",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "uuu",
   "license": "ISC",
   "devDependencies": {
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^3.1.0",
     "gulp-concat": "^2.6.0",
     "gulp-connect": "^3.2.1",
     "gulp-htmlmin": "^1.3.0",
     "gulp-imagemin": "^2.4.0",
     "gulp-jshint": "^2.0.0",
     "gulp-livereload": "^3.8.1",
     "gulp-minify-css": "^1.2.4",
     "gulp-notify": "^2.2.0",
     "gulp-rename": "^1.2.2",
     "gulp-rev-append": "^0.1.6",
     "gulp-sass": "^2.2.0",
     "gulp-uglify": "^1.5.3",
     "imagemin-pngquant": "^4.2.2"
   }
 }

gulpfile.js:

 'use strict';
 var gulp = require('gulp');
 var connect = require('gulp-connect');  //启动服务器:http://localhost:8000/;
 var rename = require('gulp-rename');    //改名;
 var concat = require('gulp-concat');    //文件合并;
 var notify = require('gulp-notify');    //提示;
 var config = require('./config.js');    //引入配置文件;

 var port = config.port;//端口号;
 var livereload = require('gulp-livereload'); //刷新浏览器;

 /* 启动服务器 */
 gulp.task('webserver',function(){
     connect.server({
         port : port,
         livereload:true
     });
 });

 //编译Sass   compact(编译一行)/compressed(压缩一行);
 var sass = require('gulp-sass');   //编译sass;
 var minifycss = require('gulp-minify-css');
 var autoprefixer = require('gulp-autoprefixer');  //自动补全css3前缀;
 gulp.task('sass', function() {

     var cssSrc = config.css.src,
         cssDst = config.css.dist;

     gulp.src( cssSrc )
         .pipe( sass({outputStyle: 'compact'}).on('error', sass.logError) )  //sass输出格式;
         .pipe( autoprefixer({browsers: ['last 2 versions', 'Android >= 4.0'],remove:false}) )   //自动添加css3前缀;
         .pipe( gulp.dest( cssDst ) )
         .pipe(rename({suffix: '.min'}))    //改名;
         .pipe(minifycss({"compatibility": "ie7"})) // compatibility 保留iehack 如:'*,_';
         .pipe( gulp.dest( cssDst ) )
         .pipe(notify({ message: 'css task ok' }))
         .pipe( livereload({start:true}) );
 });

 //合并css;
 gulp.task('cssmin', function() {
     var cssSrc = config.css.src,
         cssDst = config.css.dist,
         allCss = config.css.dist;  

     /**
      * 合并还是自己写这个数组,因为合并有时要有顺序;
      */
     gulp.src([cssDst+'index.css',cssDst+'a.css',cssDst+'b.css'])
         .pipe(concat('main.all.css'))
         .pipe(gulp.dest(cssDst))
         .pipe(concat('main.all.min.css'))
         .pipe(minifycss({"compatibility": "ie7"}))
         .pipe(gulp.dest(cssDst))
 });

 //合并压缩JS;
 var uglify = require('gulp-uglify');
 var jshint = require('gulp-jshint');    //提示;
 gulp.task('jsmin', function () {
     var jsSrc = config.js.src,
         jsDst = config.js.dist;

     gulp.src(jsSrc+'*.js')
         .pipe(jshint())
         .pipe(jshint.reporter('default'))  // 对代码进行报错提示
         .pipe(uglify())
         .pipe(rename({suffix: '.min'}))    //改名;
         .pipe(gulp.dest(jsDst));
 });

 //合并压缩JS;
 gulp.task('alljsmin', function () {
     var jsSrc = config.js.src,
         jsDst = config.js.dist;

     gulp.src([jsSrc+'index.js',jsSrc+'index2.js'])
         .pipe(jshint())       // 进行检查
         .pipe(jshint.reporter('default'))  // 对代码进行报错提示
         .pipe(concat('main.all.js'))
         .pipe(gulp.dest(jsDst))
         .pipe(uglify())
         .pipe(rename({suffix: '.min'}))    //改名;
         .pipe(gulp.dest(jsDst));
 });

 //实时监听;
 gulp.task('watch',function(){

     var cssSrc = config.css.src;
     gulp.watch(cssSrc,['sass']);
     livereload.listen({start:true});

 });

 //压缩图片
 var imagemin = require('gulp-imagemin');      // 压缩图片 $ npm i -D gulp-imagemin;
 var pngquant = require('imagemin-pngquant');  // 压缩图片 $ npm i -D imagemin-pngquant;
 gulp.task('img', function(){

     var imgSrc = config.img.src,
         imgDst = config.img.dist;

     return gulp.src( imgSrc + '*' )
         .pipe(imagemin({
             optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
             progressive: true,    //类型：Boolean 默认：false 无损压缩jpg图片
             interlaced: true,     //类型：Boolean 默认：false 隔行扫描gif进行渲染
             multipass: true,      //类型：Boolean 默认：false 多次优化svg直到完全优化
             svgoPlugins: [
                 {removeViewBox: false}  //不要移除svg的viewbox属性
             ],
             use: [pngquant({quality: '65-80'})]    //使用pngquant深度压缩png图片的imagemin插件/quality 压缩的比例最好60-80之间;
         }))
         .pipe(gulp.dest(imgDst));
 });

 //添加引入文件版本号,引入文件后边补?rev=@@hash;
 //例子:<link rel="stylesheet" href="c/index.css?rev=@@hash">;
 var rev = require('gulp-rev-append');
 gulp.task('rev', function () {
     gulp.src('*.html')
         .pipe(rev())
         .pipe(gulp.dest(''));
 });

 //执行的默认事件;
 gulp.task('default',function(){
    gulp.run('webserver', 'watch', 'sass');
 });

config.js(其实这个文件是可以没有的只不过是为了输入输入的路径)

 module.exports = {
     port : 8000,
     css : {
         all  : '',
         src  : './src/scss/*.scss',   //需要编译的scss;
         dist : './c/',   //输出的scss;
     },
     img      : {
         src  : './src/img/',
         dist : './i/'
     },
     js       : {
         src  : './src/js/',
         dist : './j/'
     },
     html     : {
         src  : '',
         dist : ''
     }

 }

启动服务：

CMD输入：gulp(默认启动服务器，监听watch)同时编译一遍sass文件

启动服务：

同步刷新需要chrome上的LiveReload插件在配置gulp-connect;

同时c文件夹下的css生成了：

这是开发完成在做合并文件工作：

CMD输入：gulp cssmin

压缩合并js

CMD输入：gulp jsmin gulp alljsmin

生产环境：src\js：

发布环境：j:

图片压缩：

CMD输入：gulp img

生产环境：src\img：

发布环境：i:

后记：

首先你要安装node.js

然后在装 gulp 和一些列 gulp-XXX的插件

截图上的编译时间对不上是因为有的之前截图好的有的是写的文章的时候后补的截图;

写个技术书名梗：

翻译API的都叫《XXX权威指南》

写Demo的都叫《XXX实战》

有点自己理解的都叫《XXX深入浅出》

API+Demo的都叫《XXX高级编程》

地摊卖的都叫《21天学会XXX》