Gulp

簡介

工程化工具

做用：

實現代碼部署
css，JS，html代碼壓縮
ES6，less，styls代碼編譯
圖片優化
...

原理：
基於unix中管道概念，stream流，前一個操做的輸出做爲後一個操做輸入。

Gulp入口文件

gulpfile.js 每一個項目中都須要有這個文件，當執行gulp會自動執行該文件。

task()

定義一個任務
gulp.task(name, [deps], fn);
參數1： name任務的名稱
參數2： deps依賴的任務, 依賴的任務要先於當前任務執行.
參數3： fn任務的回調函數

// 開啓任務
gulp.task('zf', function () {
    
});

// 啓動任務
gulp.task('default', ['zf']);

順序執行任務，須要添加依賴.

src()

將文件轉換成stream流
gulp.src(filePath, options);
參數1：filePath 文件路徑，若是存在不一樣的文件，有兩種方式表示

* 數組： ['a.js', 'b.css']
* globs表達式： ['.js']  // 表示 a.js aa.js abc.js 注意不可以有目錄符.

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

pipe()

處理每一個階段的流.
這些管道依次排開，前一個管道輸出做爲後一個管道的輸入,從而控制流向.

Stream
複雜的加工過程分割成一系列獨立的工序，這些工序能夠反覆被使用，在須要的時候還能夠替換和重組.

dest()

將文件寫入某個目錄或者文件中
gulp.dest(path);

// 開啓任務
gulp.task('zf', function () {
    
    // 建立流
    var stream = gulp.src('js/index.js');
    
    // 寫入位置
    var pos = gulp.dest('test');
    
    // 管理狀態
    stream.pipe(pos);
    
});

// 啓動任務
gulp.task('default', ['zf']);

文件監聽

watch()， 監聽文件的變化.
文件變化的條件：寫入，修改，刪除，發生一個操做:保存文件。

用法1：
watch(globs, fn);
參數1： 文件的globs路徑表示
參數2： 回調函數，回調函數中的參數： type->表示操做的類型 changed,deleted,added. path->操做的文件路徑

gulp.watch('js/*.js', function ( ev ) {
    
    // 流
    var stream = gulp.src('js/*.js');
    
    // 寫入位置
    var pos = gulp.dest('test');
    
    // 管理流 狀態
    stream.pipe(pos);
    
});


gulp.task('default');

用法2：
gulp.watch(globs, deps);
參數1： 文件的路徑
參數2： deps任務(task)集合

// 多個狀態
gulp.task('zf', function () {
    
    // 流 
    var stream = gulp.src('js/*.js');
    
    // 寫入位置
    var pos = gulp.dest('test');
    
    // 管理流
    stream.pipe(pos);
    
});

gulp.task('default'); 

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

globs

* 表示任意字符(除了目錄符號,不能包括擴展名)
** 表示任意字符(能夠包括目錄符號，不能包括擴展名)
混合使用：**/*.js 包含全部js文件 。 lib/**/*.js 表示lib文件下全部js文件

*.js：* 號匹配當前目錄任意文件. *.js匹配當前目錄下全部的js文件
**/*.js : 匹配當前目錄及其子目錄下的全部js文件
!mian.js : ! 號移除匹配的文件，這裏 移除 mian.js
*.+(js|json): +號後面跟着圓括號，裏面的元素用| 分割，匹配多個選項。這邊將匹配js文件和json文件
{} ：匹配多個屬性 例如：src/{a,b}.js 包含a.js和b.js文件 。 src/*.{jpg,png,gif} src下全部的jpg/png/gif文件

插件

npm gulp 插件 gulp-插件
gulp 官方插件 gulp-官方插件

文件重命名

gulp-rename
rename(); 參數：重命名的文件新名字
npm install gulp-rename

var gulp = require('gulp');

var rename = require('gulp-rename');


gulp.task('renameJs', function () {
    
    var stream = gulp.src('js/*.js');
    
    // 位置
    var desc = gulp.dest('test');
    
    // 修更名字
    var name = rename('app.js');
    stream.pipe(name);
    
    // 監聽流
    stream.pipe(desc);
    
});

gulp.task('default', ['renameJs']);

JS壓縮

gulp-unlify
npm install gulp-unlify

var gulp = require('gulp');

var uglify = require('gulp-uglify');

gulp.task('unlifyJs', function () {
    
    // 流
    var stream = gulp.src('js/**/*.js');
    
    // 位置
    var pos = gulp.dest('test/js');
    
    // 壓縮
    stream.pipe(uglify())
    // 監聽流
    .pipe(pos);    
    
});

gulp.task('default', ['unlifyJs']);

CSS壓縮

壓縮CSS
gulp-minify-css 和 gulp-clean-css
npm install gulp-minify-css

var gulp = require('gulp');
var minfiyCss = require('gulp-minify-css');


// 開啓任務
gulp.task('lockCss', function () {
    
    // 流
    var stream = gulp.src('css/*.css');
    
    // 位置
    var pos = gulp.dest('test/css');
    
    // 壓縮
    stream.pipe(minfiyCss())
    // 管理流
    .pipe(pos);
    
});

gulp.task('default', ['lockCss']);

HTML壓縮

gulp-minify-html

gulp.task('lockHtml', function () {
    
        var stream = gulp.src('*.html');
        
        var pos = gulp.dest('test');
        
        stream.pipe(miniyHtml())
        .pipe(pos);
        
});
gulp.task('default', ['lockHtml']);

文件合併

gulp-concat

concat();
參數： 文件合併後的文件名

// 合併文件 
gulp.task('concatFs', function () {
    
    // 流
    var stream = gulp.src('js/**/*.js');
    
    // 合併文件
    stream.pipe(concat('main.js'))
    // 壓縮文件
    .pipe(uglify())
    // 監聽流
    .pipe(gulp.dest('test/js'));
    
});

gulp.task('default', ['concatFs']);

語法校驗

js語法校驗
gulp-jslint

var gulp = require('gulp');
var jslint = require('gulp-jslint');

// 校驗js中的代碼
gulp.task('jslint', function () {

    var stream = gulp.src('js/index.js');
    
    // 先校驗
    stream .pipe(jslint())
    .pipe(gulp.dest('demo'))
    
});

// 啓動任務
gulp.task('default', ['jslint']);

圖片壓縮

gulp-imagemin
壓縮：gif，jpg，png 等經常使用類型圖片格式

若是報錯找不到須要依賴模塊，手動npm拉去文件：
imagemin-gifsicle
imagemin-jpegtran
imagemin-optipng

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');

// 建立任務
gulp.task('dealImg', function () {

    gulp.src('img/*.*')
    // 壓縮圖片
    .pipe(imagemin())
    .pipe(gulp.dest('demo'))
    
});

// 啓動任務
gulp.task('default', ['dealImg']);

增長前綴

gulp-autoprefixer
測試過程當中使用autoperfixer執行失敗
var autoperfixer = reuqire('gulp-autoprefixer');

// 加CSS前綴
gulp.task('atuo', function () {

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

});
gulp.task('default', ['atuo']);

編譯Less，Sass

插件：gulp-less
插件：gulp-sass

// 編譯Less文件
gulp.task('atuo', function () {
    
    gulp.src('**/*.less')
        .pipe(less())
        .pipe(gulp.dest('test'));
    
});

---

// 編譯Sass文件
gulp.task('atuo', function () {
    
    gulp.src('**/*.sass')
        .pipe(sass())
        .pipe(gulp.dest('test'));
    
});

gulp指令

gulp // 執行文件
gulp 任務名稱 // gulp atuo;

gulpfile

var gulp    = require('gulp'),
    jshint    = require('gulp-jshint'),
    sass    = require('gulp-sass'),
    concat    = require('gulp-concat'),
    uglify    = require('gulp-uglify'),
    rename    = require('gulp-rename'),
    imagemin    = require('gulp-imagemin'),
    minifycss    = require('gulp-minify-css'),
    livereload    = require('gulp-livereload'),
    connect    = require('gulp-connect');
 
// 檢查腳本
gulp.task('lint', function(){
    gulp.src('./src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 編譯Sass
gulp.task('sass', function(){
    gulp.src('./src/sass/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./dist/css'));
});

// 合併，壓縮js
gulp.task('scripts', function(){
    gulp.src('./src/js/*.js')
        // .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist/js'))
        // .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'))
        .pipe(connect.reload());
});

// 壓縮圖片
gulp.task('imagesmin', function(){
    gulp.src('./src/images/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            optimizationLevel: 5, //類型：Number  默認：3  取值範圍：0-7（優化等級）
            progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片
            interlaced: true, //類型：Boolean 默認：false 隔行掃描gif進行渲染
            multipass: true //類型：Boolean 默認：false 屢次優化svg直到徹底優化
        }))
        .pipe(gulp.dest('./dist/images'))
});

// 監聽html
gulp.task('html', function () {
      gulp.src('./src/*.html')
          .pipe(gulp.dest('./dist'))
        .pipe(connect.reload());
});

// 壓縮，合併css
gulp.task('css', function() {
    gulp.src('src/css/*.css')
        // .pipe(concat('main.css'))
        // .pipe(gulp.dest('./dist/css'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())
        .pipe(gulp.dest('./dist/css'))
        .pipe(connect.reload());
});

// 監聽
gulp.task('watch', function(){
    gulp.watch('./src/js/*.js', ['lint', 'scripts']);
    gulp.watch('./src/css/*.css', ['css']);
    gulp.watch('./src/*.html', ['html'])
});

// server
gulp.task('connect', function () {
  connect.server({
    root: './dist',
    livereload: true
  });
});

// 其餘任務
gulp.task('release', ['html', 'lint','scripts','sass','css','imagesmin']);

// 默認任務
gulp.task('default', ['release', 'connect', 'watch']);