Gulp 學習總結

　　Gulp 自動化工具開發很是方便，便於上手，值得使用。　

 

1、Gulp安裝

　　gulp是基於NodeJS運行的，因此須要想安裝NodeJS.  http://nodejs.org/download/

　　安裝gulp

# 安裝全局環境
npm install gulp -g #安裝本地環境
npm install gulp --save-dev

 

2、Gulp插件安裝

npm install browser-sync gulp-compass gulp-sass gulp-rename gulp-jshint gulp-uglify gulp-concat gulp-imagemin gulp-cache gulp-connect gulp-minify-css gulp-sourcemaps gulp-notify gulp-livereload gulp-clean gulp-load-plugins gulp-rev-append gulp-make-css-url-version --save-dev

　　插件可根據本身的需求安裝，分別表明：

一、編譯Sass,生成雪碧圖(gulp-compass);

二、編譯sass(gulp-sass);

三、sass瀏覽器地圖(gulp-sourcemaps);

四、重命名文件(gulp-rename);

五、JS語法檢測(gulp-jshint);

六、JS醜化(gulp-uglify);

七、JS文件合併(gulp-concat);

八、圖片壓縮(gulp-imagemin);

九、緩存通知(gulp-cache);

十、web服務(gulp-connect);

十一、壓縮CSS(gulp-minify-css);

十二、css文件引用URL圖片加版本號(gulp-make-css-url-version);

1三、清空文件夾(gulp-clean);

1四、更新通知(gulp-notify);

1五、html文件引用加版本號(gulp-rev-append);

1六、web服務瀏覽器同步瀏覽(browser-sync);　　 // 推薦使用這個做爲web服務

 

3、建立配置文件gulpfile.js

一、引入插件

var gulp = require('gulp'),　　　　　　　　　　　　　 compass = require('gulp-compass'),          // compass編譯Sass, 生成雪碧圖
    sass = require('gulp-sass'),                // sass編譯
    sourcemaps = require('gulp-sourcemaps'),    // sass地圖
    rename = require('gulp-rename'),            // 重命名文件
    jshint = require('gulp-jshint'),            // JS語法檢測
    uglify = require('gulp-uglify'),            // JS醜化
    concat = require('gulp-concat'),            // JS拼接
    imagemin = require('gulp-imagemin'),        // 圖片壓縮
    cache = require('gulp-cache'),              // 緩存通知
    connect = require('gulp-connect'),          // web服務
    minifycss = require('gulp-minify-css'),     // 壓縮CSS
    cssver = require('gulp-make-css-url-version'),    // css文件引用URL加版本號
    clean = require('gulp-clean'),              // 清空文件夾
    notify = require('gulp-notify'),            // 更新通知
    rev = require('gulp-rev-append'),           // html添加版本號
    browserSync = require('browser-sync'),      // 瀏覽器同步
    reload = browserSync.reload;                // 自動刷新

二、配置開發路徑，結構爲：

/*****項目結構***** * project(項目名稱) * |–node_modules 組件目錄 * |–dist 發佈環境 * |–css 樣式文件(壓縮) * |–images 圖片文件(壓縮圖片) * |–js js文件(壓縮) * |–index.html 靜態文件(壓縮html) * |–dev 生產環境 * |–sass sass文件 * |–images 圖片文件 * |–js js文件 * |–index.html 靜態文件 * |–config.rb Compass配置文件 * |–package.json 項目信息 * |–gulpfile.js gulp任務文件 **/

gulpfile.js配置文件中的路徑爲：

// 路徑變量
var path = { // 開發環境
 dev: { html: './dev', js: './dev/js', sass: './dev/sass', css: './dev/css', image: './dev/images' }, // 發佈環境
 dist: { html: './dist', js: './dist/js', css: './dist/css', image: './dist/images' } };

三、構建gulp執行任務

// 定義web服務模塊，增長瀏覽器同步瀏覽
gulp.task('browser-sync', function() { browserSync({ server: { baseDir: '.' } }); }); // 建立Compass任務，編譯Sass生成雪碧圖
gulp.task('compass', function() { gulp.src(path.dev.sass+'/*.scss') .pipe(compass({ config_file: './config.rb',    // 配置文件
            css: path.dev.css,             // 編譯路徑
            sass: path.dev.sass         　 // sass路徑
            //image: path.dev.image // 圖片路徑，用於生成雪碧圖
 })) .pipe(cssver()) // CSS文件引用URl加版本號
        .pipe(minifycss())                 // 壓縮CSS
        .pipe(gulp.dest(path.dist.css))    // 發佈到線上版本
        .pipe(reload({stream: true})); }); // 壓縮HTML
gulp.task('html', function() { gulp.src(path.dev.html+"/*.html") .pipe(rev()) // html 引用文件添加版本號
 .pipe(gulp.dest(path.dist.html)) .pipe(reload({stream: true})); }); //檢查腳本
gulp.task('lint', function() { gulp.src(path.dev.js+'/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); });// 圖片壓縮
gulp.task('image', function() { gulp.src(path.dev.image+'/*.*') .pipe(cache(imagemin())) .pipe(reload({stream: true})) .pipe(gulp.dest(path.dist.image)); //.pipe(notify({ message: '圖片壓縮'}));
}); // 合併壓縮JS文件
gulp.task('script', function() { gulp.src(path.dev.js+'/*.js') //.pipe(concat('all.js')) // 合併
        //.pipe(gulp.dest(path.dist.js))
        //.pipe(rename('all.min.js')) // 重命名
        .pipe(uglify())                    // 壓縮
 .pipe(gulp.dest(path.dist.js)) //.pipe(notify({ message: 'JS合併壓縮' }))
        .pipe(reload({stream: true})); }); // 清空文件夾
gulp.task('clean', function() { gulp.src([path.dist.css, path.dist.js, path.dist.image], {read: false}) .pipe(clean()); }); // 默認任務
gulp.task("default", function() { gulp.run('browser-sync', 'lint', 'compass', 'script', 'image');

    // 檢測文件發送變化 - 分開監聽爲了執行對應的命令
    gulp.watch(path.dev.html+'/*.*', ['html']); gulp.watch(path.dev.sass+'/*.scss', ['compass']); gulp.watch(path.dev.image+'/**', ['image']); gulp.watch(path.dev.js+'/*.js', ['lint', 'script']); });

注意：html文件引用增長版本號時，須要在html文件引用路徑中增長 ?rev=@@hash 方可在編譯時，自動添加版本號

<link rel="stylesheet" type="text/css" href="./css/main.css?rev=@@hash">

四、配置瀏覽器自動刷新問題

使用gulp的browser-sync插件能夠實現瀏覽器自動刷新，同步瀏覽的功能，建立實現自動刷新，須要啓動自動刷新的插件，在引入插件處

var browserSync = require('browser-sync'),        // 瀏覽器同步
    reload = browserSync.reload;                　// 自動刷新

以後，建立browser-sync的task任務，並在gulp的啓用。

gulp.task('browser-sync', function() { browserSync({ server: { baseDir: '.' } }); });

baseDir 爲默認的服務訪問路徑，默認訪問爲 http://localhost:3000, 配置信息爲 http://localhost:3001

而後在發生變化要刷新的任務處，添加以下語句便可。詳情參考: BrowserSync + Gulp.js

.pipe(reload({stream: true}));

 

gulpfile.js完整文件以下：

/**
* *****組件安裝*****
* npm install gulp browser-sync gulp-compass gulp-sass gulp-rename gulp-jshint gulp-uglify gulp-concat gulp-imagemin gulp-cache gulp-connect gulp-minify-css gulp-sourcemaps gulp-notify gulp-livereload gulp-clean gulp-load-plugins gulp-rev-append gulp-make-css-url-version --save-dev
* 
* *****項目結構*****
* project(項目名稱)
*    |–.svn 經過svn管理項目會生成這個文件夾
*    |–node_modules 組件目錄
*    |–dist 發佈環境
*        |–css 樣式文件(style.css style.min.css)
*        |–images 圖片文件(壓縮圖片)
*        |–js js文件(main.js main.min.js)
*        |–index.html 靜態文件(壓縮html)
*    |–dev 生產環境
*        |–sass sass文件
*        |–images 圖片文件
*        |–js js文件
*        |–index.html 靜態文件
*    |–config.rb Compass配置文件
*    |-package.json 項目信息
*    |–gulpfile.js gulp任務文件
**/

// 引入 Gulp插件
var gulp = require('gulp'),
    compass = require('gulp-compass'),            // compass編譯Sass, 生成雪碧圖
    sass = require('gulp-sass'),                // sass編譯
    sourcemaps = require('gulp-sourcemaps'),    // sass地圖
    rename = require('gulp-rename'),            // 重命名文件
    jshint = require('gulp-jshint'),            // JS語法檢測
    uglify = require('gulp-uglify'),            // JS醜化
    concat = require('gulp-concat'),            // JS拼接
    imagemin = require('gulp-imagemin'),        // 圖片壓縮
    cache = require('gulp-cache'),                // 緩存通知
    connect = require('gulp-connect'),            // web服務
    minifycss = require('gulp-minify-css'),        // 壓縮CSS
    cssver = require('gulp-make-css-url-version'),    // css文件引用URL加版本號
    clean = require('gulp-clean'),                // 清空文件夾
    notify = require('gulp-notify'),            // 更新通知
    rev = require('gulp-rev-append'),            // html添加版本號
    browserSync = require('browser-sync'),        // 瀏覽器同步
    reload = browserSync.reload;                // 自動刷新

// 路徑變量
var path = {
    // 開發環境
    dev: {
        html: './dev',
        js: './dev/js',
        sass: './dev/sass',
        css: './dev/css',
        image: './dev/images' 
    },
    // 發佈環境
    dist: {
        html: './dist',
        js: './dist/js',
        css: './dist/css',
        image: './dist/images' 
    }
};

// 定義web服務模塊
gulp.task('webserver', function() {
    connect.server({
        livereload: true,
        port: 8888
    });
});

// 定義web服務模塊，增長瀏覽器同步瀏覽
gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: '.'
        }
    });
});

// 建立Compass任務，編譯Sass生成雪碧圖
gulp.task('compass', function() {
    gulp.src(path.dev.sass+'/*.scss')
        .pipe(compass({
            config_file: './config.rb',    // 配置文件
            css: path.dev.css,             // 編譯路徑
            sass: path.dev.sass         // sass路徑
            //image: path.dev.image         // 圖片路徑，用於生成雪碧圖
        }))
        .pipe(cssver())                    // CSS文件引用URl加版本號
        .pipe(minifycss())                // 壓縮CSS
        .pipe(gulp.dest(path.dist.css))    // 發佈到線上版本
        .pipe(reload({stream: true}));
});

// 壓縮HTML
gulp.task('html', function() {
    gulp.src(path.dev.html+"/*.html")
        .pipe(rev())                    // html 引用文件添加版本號
        .pipe(gulp.dest(path.dist.html))
        .pipe(reload({stream: true}));
});

//檢查腳本
gulp.task('lint', function() {
    gulp.src(path.dev.js+'/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});
// 圖片壓縮
gulp.task('image', function() {
    gulp.src(path.dev.image+'/*.*')
        .pipe(cache(imagemin()))
        .pipe(reload({stream: true}))
        .pipe(gulp.dest(path.dist.image));
        //.pipe(notify({ message: '圖片壓縮'}));
});

// 合併壓縮JS文件
gulp.task('script', function() {
    gulp.src(path.dev.js+'/*.js')
        //.pipe(concat('all.js'))            // 合併
        //.pipe(gulp.dest(path.dist.js))
        //.pipe(rename('all.min.js'))        // 重命名
        .pipe(uglify())                    // 壓縮
        .pipe(gulp.dest(path.dist.js))
        //.pipe(notify({ message: 'JS合併壓縮' }))
        .pipe(reload({stream: true}));
});

// 清空文件夾
gulp.task('clean', function() {
    gulp.src([path.dist.css, path.dist.js, path.dist.image], {read: false})
        .pipe(clean());
});

// 默認任務
gulp.task("default", function() {
    gulp.run('browser-sync', 'lint', 'compass', 'script', 'image');

    // 檢測文件發送變化 - 分開監聽爲了執行對應的命令
    gulp.watch(path.dev.html+'/*.*', ['html']);
    gulp.watch(path.dev.sass+'/*.scss', ['compass']);
    gulp.watch(path.dev.image+'/**', ['image']);
    gulp.watch(path.dev.js+'/*.js', ['lint', 'script']);

});

 gulp-compass 合併雪碧圖使用的 config.rb 配置文件，內容以下：

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "./dev/css"
sass_dir = "./dev/sass"
images_dir = "./dev/images"
javascripts_dir = "./dev/js"

# You can select your preferred output style here (can be overridden via the command line):
# 合併雪碧圖的方式
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# 相對路徑
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

 

4、運行gulp

在項目目錄下執行 gulp 命令就會運行 default 任務，而且啓動監聽，之因此分開設置監放任務，是爲了執行對應命令，若是合併在一塊兒執行，會增長編譯時間。

 

5、gulpfile.js配置文件參數說明

一、gulp.task()

gulp模塊的task方法，用於定義具體的任務，第一個參數爲任務名，第二個參數爲任務函數，如image任務，調用直接運行 gulp image

gulp.task('image', function() { console.log('圖片任務執行'); });

task方法也能夠知道一組任務，如：

gulp.task('default',['html', 'sass', 'js']);

二、gulp.src()

gulp模塊的src方法，用於產生數據流，表示要處理的文件，通常有如下幾種格式：

• js/app.js：指定確切的文件名。
• js/*.js：某個目錄全部後綴名爲js的文件。
• js/**/*.js：某個目錄及其全部子目錄中的全部後綴名爲js的文件。
• !js/app.js：除了js/app.js之外的全部文件。
• *.+(js|css)：匹配項目根目錄下，全部後綴名爲js或css的文件。

src方法的參數能夠是一個數組，如：

gulp.src(['./js/*.js', './sass/*.scss']);

三、gulp.watch()

gulp模塊的watch方法，用於指點須要監視的文件，一旦文件發生變更，就運行指點任務。

gulp.watch('./js/*.js', ['lint', 'script']);

四、pipe

.pipe爲每一個任務的鏈接，執行完一個任務以後，再次鏈接執行下一個任務，如：

.pipe(minifycss())                // 壓縮CSS
.pipe(gulp.dest(path.dist.css));  // 發佈到線上版本

先執行壓縮，再發布到線上版本

 

6、gulp學習資料參考

一、Gulp.js：比 Grunt 更簡單的自動化的項目構建利器

二、Gulp使用指南

三、Gulp：任務自動管理工具

四、Gulp安裝及配合組件構建前端開發一體化

五、gulp詳細入門教程

六、BrowserSync + Gulp.js

七、Gulp.js-LiveReload 自動刷新頁面

八、https://www.npmjs.com/package/gulp

九、Getting Started with Gulp

十、gulp plugins 插件介紹

十一、前端構建工具gulpjs的使用介紹及技巧