gulp学习笔记

1.安装什么的就不介绍了，会安装webpack就会安装gulp

2.进入到项目目录，使用如下命令初始化项目：

npm init

当然，也可以直接创建一个package.json文件，内容如下：
{
“name”: “Gulp-Workflow”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1”,
“start”: “gulp dev”,
“dev”: “gulp dev”,
“clean”: “rimraf dist”,
“build”: “rimraf dist && gulp build”
},
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
“browser-sync”: “^2.18.6”,
“gulp”: “^3.9.1”,
“gulp-autoprefixer”: “^3.1.1”,
“gulp-concat”: “^2.6.1”,
“gulp-cssnano”: “^2.1.2”,
“gulp-imagemin”: “^3.1.1”,
“gulp-jshint”: “^2.0.4”,
“gulp-rename”: “^1.2.2”,
“gulp-sass”: “^3.0.0”,
“gulp-uglify”: “^2.0.0”,
“jshint”: “^2.9.4”
}
}

3.创建目录结构
　　我们在项目中创建一个src目录，作为项目的源。而创建dist目录作为源文件打包后存放的位置，创建build目录放置gulp的另外一些配置文件。如下：

- project
  |- build
  |- dist // 打包文件夹
  |- src  // 源文件夹
  | |- assets // 放置一些第三方文件，如bootstrap
  | |- css
  | | `- index.css
  | |- images
  | |- js
  | | `- index.js
  | |- sass
  | | `- index.scss
  |- gulpfile.js
  `- package.json

4.编写Gulp配置
创建gulp的config文件
　　我们在build文件夹中可以创建一个 gulpfile.config.js 文件，主要用途为保存项目的目录配置，如源文件存放的路径，打包后文件存放的路径等，可以进行灵活配置。同时将Config对应暴露出来供其他文件引用。
gulpfile.config.js 写打包进程，并且监听css，js,img的变化。

var SRC_DIR = "./src/";   //源代码路径
var DIST_DIR = "./dist/";  //编译好的代码路径
var paths = {};
//需要打包的文件夹
var plugins = ["alert","box","hphm","public","select","validate"];
/*
 * 需要用到的插件安装
 * npm install --save-dev gulp gulp-minify-css gulp-uglify gulp-rename gulp-concat gulp-imagemin del gulp-zip  gulp-if gulp-rev gulp-rev-collector gulp-sequence 
 */
var gulp = require('gulp'); //基础库
var minifycss = require('gulp-minify-css'); //css压缩
var uglify = require('gulp-uglify'); //js压缩
var rename = require('gulp-rename'); //重命名
var concat = require('gulp-concat'); //合并文件
var imagemin = require('gulp-imagemin'); //图片压缩
var del = require('del'); //清空文件
var zip = require('gulp-zip'); //生成zip包
var less = require('gulp-less'); //预编译css
var inject = require('gulp-inject-string');//插入字符
//var rev = require('gulp-rev');                                  //- 对文件名加MD5后缀
//var revCollector = require('gulp-rev-collector'); 
//var gulpSequence = require('gulp-sequence');  //顺序执行 ,但对zip还是不起作用
//var gulpif = require('gulp-if');
//var sprity = require('sprity');



 //需要压缩，打包的css,js,image文件
function createPath(plugins){
    var jsPath = [],imagePath = [],cssPath = [];
    for(var i=0,l=plugins.length;i<l;i++){
        jsPath.push(SRC_DIR+plugins[i]+'/*.js');
        imagePath.push(SRC_DIR+plugins[i]+'/css/images/*');
        cssPath.push(SRC_DIR+plugins[i]+'/css/*.css');
    }
    return {"css":cssPath,"js":jsPath,"img":imagePath};
}


/**压缩CSS
 * 传入路径，名称，压缩后的路径
 * @param {Object} src
 * @param {Object} name
 * @param {Object} dist
 */
function buildCss(src,name,dist){
    return gulp.src(src)
        .pipe(concat(name+'.css')) //合并文件
        .pipe(gulp.dest(dist)) //将合并好的文件写入打包后的目录
        .pipe(rename({suffix: '.all'})) //重命名
        .pipe(minifycss())              //压缩
        .pipe(gulp.dest(dist))
        .pipe(rename({suffix: '.min'}))
}

/**压缩JS
 * 传入路径，名称，压缩后的路径
 * @param {Object} src
 * @param {Object} name
 * @param {Object} dist
 */
function buildJs(src,name,dist){
    return gulp.src(src)
        .pipe(concat(name+'.js')) //合并文件
        .pipe(gulp.dest(dist)) //将合并好的文件写入打包后的目录
        .pipe(rename({suffix: '.min'})) //重命名
        .pipe(uglify())              //压缩
        .pipe(gulp.dest(dist))     //继续输出
}

/**
 * 压缩图片
 * @param {Object} src
 * @param {Object} dist
 */
function buildIMG(src,dist){
   return  gulp.src(src)
              // .pipe(imagemin()) //图片压缩
               .pipe(gulp.dest(dist));
}

function copyRes(src,dist){
    return  gulp.src(src)
                .pipe(gulp.dest(dist))


}
//清空图片、样式、js
gulp.task('clean',function(){
    return del(DIST_DIR);
});


 paths = createPath(plugins);


 //压缩任务，表示先执行clean任务之后再执行压缩任务
 gulp.task('server',['clean'],function(){
    buildIMG(paths.img,DIST_DIR+'/css/images');
    buildCss(paths.css,"traffic_ui",DIST_DIR+'css');
    buildJs(paths.js,"traffic_ui",DIST_DIR+'js');
    copyRes([SRC_DIR+'select/py.dic',SRC_DIR+'select/polyphone.json'],DIST_DIR);
 });
// 监听任务 运行语句 gulp watch,主要是监听各个文件的变化
gulp.task('watch',function(){
    // 监听css
    gulp.watch(paths.css, function(){
        gulp.start('css');
    });
    // 监听js
    gulp.watch(paths.js, function(){
        gulp.start('js');
    });
    // 监听images
    gulp.watch(paths.img, function(){
        gulp.start('cleanimg','img');
    });
});

这个是最基本的打包，就是把多个css,js文件合并为1个，并且放入指定的目录中。