用gulp構建一個簡單經常使用的的環境

gulp做爲一個自動化構建工具，在前端開發中大大的提升了開發效率，前端開發者們能夠利用他減小許多繁複無腦的操做。
這裏簡單構建一個小環境，就能夠在之後的學習中，直接新建各類test.html測試咱們新學習的知識點啦~
【看不明白的，有疏漏的，歡迎指出，我更改措辭或者bug】

入門安裝

入門就不講了，會用npm的同窗應該都清楚，這裏貼一個既有的官方指南。gulp入門指南

一些小基礎

詳細的配置我就不講了，api文檔戳進去看。簡單作點通俗的講解。

gulp.task(name[, deps], fn)

gulp是由每一個小task組成的，咱們能夠相似函數同樣，把咱們須要的一個個小功能以各類task分開寫，而後能夠在cmd裏使用gulp <task> <othertask> 方式來執行。

固然任務多了，咱們就須要一鍵執行全部操做，因此通常狀況下，咱們只運行 gulp 命令，則會執行所註冊的名爲 default 的 task，而後在default這個任務後面，添加咱們寫好的其它task名的數組，則會挨個執行咱們寫好的各類task。否則只執行function。
若是沒有default這個 task，那麼gulp命令會報錯。

gulp.task('default', function() {
  // 將你的默認的任務代碼放在這
});

注意： 默認的，task 將以最大的併發數執行，也就是說，gulp 會一次性運行全部的 task 而且不作任何等待。若是你想要建立一個序列化的 task 隊列，並以特定的順序執行，嗯，戳文檔api文檔。

gulp.src(globs[, options])

其實說白了就是匹配咱們要處理的文件，src就是路徑。

gulp.src('client/templates/*.jade')

*天然是表示任意，所有。
glob 請參考 node-glob 語法 或者，你也能夠直接寫文件的路徑。

gulp.pipe

其實就是把src匹配到的文件傳遞到後面來執行。括號裏就是咱們要進行的各類操做。

有點相似js語法，不難理解，用.接起來，一步步執行。
通常咱們會一行行寫，可讀性好點，寫一行不友好。

gulp.src('client/templates/*.jade')
  .pipe(jade())
  .pipe(minify())
  .pipe(gulp.dest('build/minified_templates'));

gulp.dest(path[, options])

生成處理好的文件。
你能夠將它 pipe 到多個文件夾。若是某文件夾不存在，將會自動建立它。

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));

gulp.watch(glob[, opts], tasks)

監視文件，而且能夠在文件發生改動時候作一些事情。

gulp.watch(glob [, opts], tasks) 
或
gulp.watch(glob [, opts, cb])

須要在文件變更後執行的一個或者多個經過 gulp.task() 建立的 task 的名字，

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

也能夠直接執行function，同樣的。

gulp.watch('js/**/*.js', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

gulp的不少操做都是用插件執行的，固然，詳細操做天然是每一個插件看做者文檔了！並且同一個功能的插件也層出不窮，你們能夠根據須要自行選擇。好了，開始咱們的構建，注意，提到的每個插件都要npm安裝

注意：每個插件都存在可配置的空間，因此關於最大化利用好每一個插件，也是參照文檔來的，這裏咱們取一些通用配置，具體視項目狀況而定。

開服務，自動刷新

無可厚非，代碼實時保存，瀏覽器實時刷新，是前端最想要的功能，手動刷新瀏覽器相信是每個前端新手要吐的操做。

開服務

採用gulp-connect插件。
根目錄下開啓服務，端口號爲2323，開啓實時刷新，局域網內可用。

var connect = require('gulp-connect');
var serverConfig = {
root: "./",
port: 2323,
livereload: true,
host: '::'
}
gulp.task('server',function(){
    connect.server(serverConfig);
});

配置自動刷新

採用gulp-livereload。
開啓刷新，監聽html變化，並實時刷新。

var livereload = require('gulp-livereload')
gulp.task('watch', function () {
    livereload.listen();
    gulp.watch(['*.html'],function(event){
        livereload.changed(event.path);
    })
});

其實到這裏，一個微型的服務就搭建起來了，最後別忘了最根本的一句

var gulp = require('gulp');

否則是起不來的。
爲了簡便，能夠在gulpfiles.js裏添加一行,

gulp.task('default',['server','watch']);

直接運行gulp就好,讓他們依次執行。

到這裏，其實就是一個小規模的調試環境，接下來，讓咱們升級一下，開始構造簡單的發佈環境

壓縮html

採用的是gulp-htmlmin插件。
抽取src目錄下的全部html文件，導入到htmlmin插件進行處理，並將結果輸出到public目錄，最後從新刷新已開啓的服務。

var htmlmin = require('gulp-htmlmin');
gulp.task('html', function(){
    gulp.src('src/*.html')
        .pipe(htmlmin({
            collapseWhitespace: true,
              removeComments: true
        }))
        .pipe(gulp.dest('public'))
        .pipe(connect.reload());
});

壓縮js

採用的是gulp-uglify插件，但同時，咱們也用到了另外一個插件gulp-concat，這個是用來鏈接各個文件組成一個文件。
抽取src/js下的全部js文件，將其合併，而後壓縮，輸出到public/js目錄，最後服務重載。

var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
gulp.task('script',function(){
    gulp.src('src/js/*.js')
        .pipe(concat('main.js'))
        .pipe(uglify({mangle:false}))
        .pipe(gulp.dest('public/js'))
    .pipe(connect.reload());
});

壓縮css

採用的是gulp-cssnano插件。相似js，不解釋了。

var cssnano = require('gulp-cssnano');
gulp.task('css',function(){
gulp.src('src/css/*.css')
    .pipe(concat('animate.css'))
    .pipe(cssnano())
    .pipe(gulp.dest('public/css'))
    .pipe(connect.reload());
})

壓縮圖片

採起的是gulp-smushit插件，相似js，不解釋。

var smushit = require('gulp-smushit');
gulp.task('imagemin',function(){
    gulp.src(['src/images/*.png','src/images/*.jpg'])
        .pipe(smushit({
            verbose:true
        }))
        .pipe(gulp.dest('public/images'))
        .pipe(connect.reload());
});

gulp-watch監聽文件變更，自動重載

這個gulp-watch在前面有講到，其實就是開啓監聽，並從新執行各個html
，js，css，imagemin壓縮任務。
相信你們對比前面的gulp-livereload可以看的出來，這裏二者是有衝突的，一個只是調試下刷新頁面，一個卻每次都要壓縮。
因此其實實際項目中是不會把壓縮任務配置到watch裏，會形成資源浪費，你每保存一次，就會壓縮。只會在最後調試完成，執行壓縮一次。

gulp.task('watch', function () {
  gulp.watch(['src/*.html'], ['html']);
  gulp.watch(['src/js/*.js'], ['script']);
  gulp.watch(['src/css/*.css'], ['css']);
  gulp.watch(['src/images/*.*'], ['imagemin']);
});

作一個min的task就好，只須要gulp min。

gulp.task('min',['html','script','css','imagemin']);