gulp教程

最近項目中用到前端構建工具gulp，特地總結一下：

gulp是前端開發過程當中對代碼進行構建的工具，是自動化項目的構建利器；她不只能對網站資源進行優化，並且在開發過程當中不少重複的任務可以使用正確的工具自動完成；使用她，咱們不只能夠很愉快的編寫代碼，並且大大提升咱們的工做效率。

gulp是基於Nodejs的自動任務運行器， 她能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。在實現上，她借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操做上很是簡單。經過本文，咱們將學習如何使用Gulp來改變開發流程，從而使開發更加快速高效（拷貝）。好比：

 

1.安裝

　　直接用nodejs安裝便可，在項目裏面新建一個gulpfile.js文件，而後就能夠在項目下面使用gulp命令根據gulpfile.js裏面的內容對項目進行構建。

　　預覽：

　　

2.gulp介紹，主要看配置文件。

//導入工具包 require('node_modules裏對應模塊')

var gulp = require( 'gulp'),

     // 獲取 uglify 模塊（用於壓縮 JS）

    uglify = require( 'gulp-uglify'),

    less = require( 'gulp-less'),

     //獲取 clean-css模塊(用於壓縮css)

    cleancss = require( 'gulp-clean-css'),

     //獲取imagemin模塊(用於壓縮圖片)

    imagemin = require( 'gulp-imagemin'),

     // 獲取autoprefixer模塊(用於添加瀏覽器前綴)

    autoprefixer = require( 'gulp-autoprefixer'),

     // JS代碼檢查工具，能夠檢測JavaScript中錯誤和潛在問題

    jshint = require( 'gulp-jshint'),

     // html清理

    htmlmin = require( 'gulp-htmlmin'),

     //重命名

    rename = require( 'gulp-rename'),

     //目標目錄清理，在用於gulp任務執行前清空目標目錄

    clean = require( 'gulp-clean'),

     //文件拼接，可用於多個CSS文件或多個JS文件的合併

    concat = require( 'gulp-concat'),

     //任務通知，可用於某項任務執行完成的在控制檯輸出通知

    notify = require( 'gulp-notify'),

     //資源緩存處理，可用於緩存已壓縮過的資源，如：圖片

    cache = require( 'gulp-cache'),

     //實時更新

    livereload = require( 'gulp-livereload'),

     // 瀏覽器同步刷新,藉助node模塊Browsersync 

    browserSync = require( 'browser-sync').create(),

    pump = require( 'pump'),

     //頁面從新加載

    reload = browserSync.reload;

//gulp.task(name[, deps], fn) 定義任務  name：任務名稱 deps：依賴任務名稱 fn：回調函數

//gulp.src(globs[, options]) 執行任務處理的文件  globs：處理的文件路徑(字符串或者字符串數組) 

//gulp.dest(path[, options]) 處理完後文件生成路徑

/**build**/

// 複製不須要編譯的資源

gulp.task( 'copy',  function() {

    gulp.src( 'static/fonts/*')

        .pipe(gulp.dest( 'dist/static/fonts'))

});

//html

gulp.task( 'htmls',  function() {

     var options = {

        removeComments:  true,  //清除HTML註釋

        collapseWhitespace:  false,  //壓縮HTML

        collapseBooleanAttributes:  true,  //省略布爾屬性的值 <input checked="true"/> ==> <input />

        removeEmptyAttributes:  true,  //刪除全部空格做屬性值 <input id="" /> ==> <input />

        removeScriptTypeAttributes:  true,  //刪除<script>的type="text/javascript"

        removeStyleLinkTypeAttributes:  true,  //刪除<style>和<link>的type="text/css"

         // minifyJS: true,//壓縮頁面JS

         // minifyCSS: true//壓縮頁面CSS

    };

    gulp.src( './*.html')

        .pipe(htmlmin(options))

        .pipe(gulp.dest( 'dist'));

});

gulp.task( 'autopre',  function() {

    gulp.src( 'src/css/index.css')

        .pipe(autoprefixer({

            browsers: [ 'last 2 versions',  'ios 7',  'Android >= 4.0'],

            cascade:  true,  //是否美化屬性值 默認：true 像這樣：

             //-webkit-transform: rotate(45deg);

             //        transform: rotate(45deg);

            remove:  true  //是否去掉沒必要要的前綴 默認：true 

        }))

        .pipe(gulp.dest( 'dist/css'));

});

// 樣式處理任務

gulp.task( 'styles',  function() {

     return gulp.src( 'src/css/*.css')  //引入全部CSS

        .pipe(concat( 'index.css'))  //合併CSS文件

        .pipe(autoprefixer( 'last 2 version',  'ios 6',  'android >= 4'))

        .pipe(rename({ suffix:  '.min' }))  //文件重命名

         // .pipe(cleancss())                  //CSS壓縮

        .pipe(gulp.dest( 'dist/static/css'))  //壓縮版輸出

         // .pipe(notify({ message: '樣式文件處理完成' }));

});

// JS處理任務

gulp.task( 'jsmin',  function(cb) {

    pump([

        gulp.src( 'src/js/*.js'),  //多個文件以數組形式傳入

        uglify(),

        gulp.dest( 'dist/js')

    ], cb)

});

gulp.task( 'jsconcat',  function() {

     // gulp.src(['static/js/libs/layer.js', 'static/js/libs/index.min.js']) //多個文件以數組形式傳入

    gulp.src([ 'src/js/a.js',  'src/js/b.js',  'src/js/c.js'])  //多個文件以數組形式傳入

        .pipe(concat( 'abc.js'))

        .pipe(gulp.dest( 'dist/js'));

});

gulp.task( 'scripts',  function() {

     return gulp.src( 'src/js/*.js')  //引入全部需處理的JSs

        .pipe(jshint.reporter( 'default'))  //S代碼檢查

        .pipe(concat( 'index.js'))  //合併JS文件

        .pipe(rename({ suffix:  '.min' }))  //重命名

        .pipe(uglify())  //壓縮JS

        .pipe(gulp.dest( 'dist/js'))  //壓縮版輸出

         // .pipe(notify({ message: 'JS文件處理完成' }));

});

// 圖片處理任務

gulp.task( 'images',  function() {

     return gulp.src( 'static/images/*')  //引入全部需處理的image

        .pipe(imagemin({ optimizationLevel:  3, progressive:  true, interlaced:  true }))  //壓縮圖片

         // 若是想對變更過的文件進行壓縮，則使用下面一句代碼

         // .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))) 

        .pipe(gulp.dest( 'dist/static/images'))

         // .pipe(notify({ message: '圖片處理完成' }));

});

// 目標目錄清理

gulp.task( 'clean',  function() {

     return gulp.src([ 'dist/static/css',  'dist/static/js',  'dist/static/images'], { read:  false })

        .pipe(clean());

});

// 預設任務，執行清理後build

gulp.task( 'build', [ 'clean'],  function() {

    gulp.start( 'copy',  'htmls',  'styles',  'scripts',  'images');

});

//把less文件編譯成css

gulp.task( 'less',  function() {

    gulp.src( 'src/css/*.less')

        .pipe(less())

        .pipe(gulp.dest( 'src/css'));  //將會在src/css下生成index.css

});

//browser-sync初始化,建立靜態服務器

gulp.task( 'browser-sync',  function() {

    browserSync.init({

        server: {

            baseDir:  "./"

        }

    });

    gulp.watch([ "src/css/*.css",  "src/html/*.html"]).on( 'change', reload);

});

//監聽修改,當less文件發生變化的時候，執行less任務

gulp.task( 'watch',  function() {

    livereload.listen();

    gulp.watch( 'src/css/*.less', [ 'less']);

});

 

3.注意，在執行jsmin的時候，發現錯誤。而後到github上看是借用了pump模塊,借用pump模塊，把gulp流放在回調函數裏能更詳細的看出問題所在：

 4.完整項目見github:

　　https://github.com/LeaderAndMaster/gulpdemo