gulp是基于node的前端工具，可以對代碼壓縮，自動刷新頁面，編譯各種預(yù)處理器，給css加瀏覽器前綴，加版本號，自動打包都很方便，實現(xiàn)的前端代碼的自動化處理。

開始我們要裝node.js,這個沒什么可說的，自行百度，安裝完成之后在命令行里面輸入下面兩個命令，如果輸出了版本號的話（請忽視前面的符號，這是cmder自帶的，win下很好用的命令行終端），OK那么恭喜你安裝成功了

<pre>

λ node -v

v6.7.0

λ npm -v

3.10.3

</pre>

安裝好了Node環(huán)境后，接下來你應(yīng)該通過npm來安裝Gulp了，-g 代表的是全局安裝，這樣你到時候再任何目錄下都可以跑gulp命令

λ  npm install gulp -g

將命令行終端定位到項目文件，執(zhí)行npm init，創(chuàng)建一個package.json文件，這樣方便以后你的項目如果別人也用的話，那么那個人只要 npm/cnpm install 一下,所有依賴的插件都安裝了，你不需要拷貝給他。

先前gulp安裝是在全局環(huán)境下，現(xiàn)在還要將gulp的安裝在你項目目錄下，-D意思是你安裝的包會出現(xiàn)在你開發(fā)(dev)的依賴(Dependencies)里

λ  npm install gulp -D

這是我的package.json：

{
  "name": "xsj",
  "version": "1.0.0",
  "description": "Daren Official website",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "zk",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "2.10.0",
    "browsersync-ssi": "0.2.4",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-cache": "^0.4.6",
    "gulp-clean": "^0.3.2",
    "gulp-imagemin": "^3.2.0",
    "gulp-jade": "^1.1.0",
    "gulp-minify": "0.0.5",
    "gulp-plumber": "^1.0.1",
    "gulp-run-sequence": "^0.3.2",
    "gulp-sass": "2.1.0",
    "gulp-zip": "^3.0.2"
  }
}

接著你在根目錄下新建一個名叫g(shù)ulpfile.js的js文件，我們關(guān)于gulp的配置都會寫在這個文件里。我們可以寫段代碼測試下成功沒有。

var gulp = require('gulp'); 
gulp.task('test',function(){ 
console.log('gulp 測試成功了!')
 })

在命令行運行 gulp test 回車 如果看到了控制臺輸出了那句話，OK,你的gulp的測試成功。
這是我的gulp配置，大家參考下，明天詳解。

var gulp = require('gulp'),
    browserSync = require('browser-sync').create(),
    SSI = require('browsersync-ssi'),
    minify = require('gulp-minify'),
    imagemin = require('gulp-imagemin'),
    cache = require('gulp-cache'),
    plumber = require('gulp-plumber'),
    sass = require('gulp-sass'),
    autoprefixer=require('gulp-autoprefixer')
    jade = require('gulp-jade'),
    clean = require('gulp-clean'),
    runSequence = require('gulp-run-sequence'),
    zip = require('gulp-zip');

//監(jiān)聽資源變動，自動刷新頁面
gulp.task('serve', function () {
  browserSync.init({
    server: {
      baseDir: ["./dist"],
      middleware: SSI({
        baseDir: './dist',
        ext: '.shtml',
        version: '2.10.0'
      })
    }
  });

  gulp.watch("app/scss/**/*.scss", ['sass']);
  gulp.watch("app/js/**/*.js", ['js']);
  gulp.watch("app/jade/*.jade", ['jade']);
  gulp.watch("app/lib/*.js", ['lib']);
  gulp.watch('app/img/*.{jpg,png,gif}', ['imgmin']);
  gulp.watch("dist/**/*.html").on("change", browserSync.reload);
});
//編譯sass,壓縮，加瀏覽器前綴
gulp.task('sass', function () {
  return gulp.src("app/scss/**/*.scss")
    .pipe(plumber())
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(sass({ outputStyle: "compressed" }))
    .pipe(autoprefixer({
            browsers: ['last 2 versions'],
        }))
    .pipe(gulp.dest("dist/css"))
    .pipe(browserSync.stream());
});
//壓縮js(生成2種版本)
gulp.task('js', function () {
  return gulp.src('app/js/**/*.js')
    .pipe(plumber())
    .pipe(minify())
    .pipe(gulp.dest("dist/js"))
    .pipe(browserSync.stream());
});

//編譯jade
gulp.task('jade', function () {
  return gulp.src("app/jade/**/*.jade")
    .pipe(plumber())
    .pipe(jade())
    .pipe(gulp.dest("dist/"))
    .pipe(browserSync.stream());
});
//搬運插件
gulp.task('lib', function () {
  return gulp.src('app/lib/*.js')
    .pipe(plumber())
    .pipe(gulp.dest("dist/lib"))
});
//僅壓縮未緩存圖片
gulp.task('imgmin', function () {
  return gulp.src('app/img/*.{jpg,png,gif}')
    .pipe(plumber())
    .pipe(cache(imagemin({
            optimizationLevel: 3,
            interlaced: true,
            progressive: true
    })))
    .pipe(gulp.dest('dist/img'))
})
//生成生產(chǎn)版本壓縮包
gulp.task('publish', function () {
  return gulp.src('dist/**/*')
    .pipe(plumber())
    .pipe(zip('publish.zip'))
    .pipe(gulp.dest('release'))
});
//重構(gòu)dist文件
gulp.task('redist', function () {
  //先運行clean，然后并行運行html,js,sass等
  runSequence('clean', ['html', 'jade', 'js', 'sass', 'lib', 'imgmin']);
});

gulp.task('clean', function () {
  return gulp.src('dist/*', { read: false })
    .pipe(clean());
});

gulp.task('default', ['html', 'serve'])

放兩張圖大家理解下

gulp-p1.png

gulp-p2.png