关于gulp的一点点知识

写一下此时此刻的心情，刚刚弄了一个gulp的小项目，又回忆了一下关于gulp的小知识

gulp插件查询https://www.npmjs.com/package/package

现在的需求是将项目压缩打包以后形成的目录：

-dist
    --js
    --css
    --images
    --html
    --fonts

需要操作的项目的目录如下:

-src
    --config
        ---interfaceConfig
        ---serviceConfig
        ---version
    --resources
        ---js
        ---css
        ---images
        ---fonts
    --views
        ---user
            ----userInfo.html
            ----userInfo.css
            ----userInfo.js
    --index.html

1. 首先，你做之前首先需要自己明白两点：
   1) 你使用gulp完成目的所需要的插件？
   2）你需要将项目打包成一个怎样的目录结构？
2. 在我这个项目里我需要的gulp插件如下：

var gulp = require('gulp'), //引入gulp
    webserver = require('gulp-webserver'),//注册任务插件
    livereload = require('gulp-livereload'),//实时刷新
    csso = require('gulp-csso'),//css压缩
    rename = require('gulp-rename'),//重命名
    concat = require("gulp-concat"),//文件合并
    uglify = require("gulp-uglify"),//js文件压缩混淆
    jshint = require('gulp-jshint'),//检查js的规范
    autoprefixer = require('gulp-autoprefixer'),//css的兼容性
    imagemin = require('gulp-imagemin'),//图片压缩
    notify = require('gulp-notify'),//信息提醒
    clean = require('gulp-clean');//文件清除

1. 代码的规范性，这里需要确定一下输出的路径，和输入的路径两个对象（主要是为了保证头脑的清醒，知道自己的每一步该做什么事情）

//输入路径
var src = {
    html:'./**/*.html',
    js:'./**/*.js',
    css:'./views/**/*.css',
    images:'./resources/images/*.{png,jpg,gif,svg}',
    fonts:'./resources/fonts/*'
};

//输出路径
var distSrc = {
    html:'./dist/html',
    js:'./dist/js',
    css:'./dist/css',
    images:'./dist/img',
    fonts:'./dist/fonts'
};

1. 第四步就是编写相关的任务（比如以下）：

//注册任务
gulp.task('webserver' ,function(){
    gulp.src('dist')
        .pipe(webserver({
            livereload:true,
            open:true,
            port:3000,
        }));
});
//css
gulp.task('build-css' , function(){
    return  gulp.src(src.css)
            .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
            .pipe(csso())
            .pipe(rename({suffix:'.min'}))
            .pipe(gulp.dest(distSrc.css))
            .pipe(notify({message: 'build-css task complete'}));
});
// 预设任务
gulp.task('default', ['clean'], function() {
    gulp.start('build-html','jshint','build-css', 'stylesMin','build-js','build-img','build-fonts', 'watch' , 'webserver');
});