前端工具之Gulp

Gulp是一款前端自動化的工具，若是能熟練使用Gulp來進行開發必定能夠節省不少的時間，也能夠快速的提升工做效率。

 

在使用Gulp以前就是要配置好Gulp安裝的環境，這是咱們能使用Gulp快速開發的第一步。

 

安裝

~~~~~~~~~~~~~~

D1 NodeJS安裝

　　Gulp是基於NodeJS運行的，因此第一步就是要先安裝NodeJS， https://nodejs.org/en/。

　　安裝好Node以後，在Node的Command裏面安裝全局環境以及本地環境

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

　　安裝成功以後就能夠進入下一步了，//gulp -v能夠查看安裝成功後的版本號。

 

D2 Ruby安裝

　　Ruby安裝地址：http://rubyinstaller.org/downloads

　　在Gulp中，有一個重要的編譯工具就是sass, 利用sass能夠快速的編譯咱們的css代碼。由於sass依賴於ruby環境，因此裝sass以前先確認裝了ruby。

　　在安裝的時候，請勾選Add Ruby executables to your PATH這個選項，添加環境變量，否則之後使用編譯軟件的時候會提示找不到ruby環境。

　　　

 

D2 SASS安裝

　　安裝完ruby以後，在開始菜單中，找到剛纔咱們安裝的ruby，打開Start Command Prompt with Ruby

　　

　　而後直接在命令行中輸入

gem install sass

　　

　　這個方法能夠最快速便捷的安裝SASS， 可是因爲可能被牆，不必定能安裝成功，因此咱們還能夠用一種更加穩妥的方式來安裝SASS.

　　淘寶RubyGems鏡像安裝 sass

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES ***

https://ruby.taobao.org
# 請確保只有 ruby.taobao.org
$ gem install sass

 

SASS安裝成功以後就能夠開始使用Gulp了，  如下會介紹一下Gulp的配置以及方法。

 

配置

~~~~~~~~~~~~~

D1 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服務

　　能夠把以前配置好的文件整個複製到新的項目下也是能夠的，節省了配置安裝的時間

 

D2  建立配置文件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;                // 自動刷新

 

D2  構建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']);

});

　　

　　配置瀏覽器自動刷新問題

　　使用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}));

 

　　

　　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

　　

　　最後只要在cmd當前目錄下輸入gulp指令就會開始default任務了。