一、基本安裝

1、安裝gulp

1 $ npm install --global gulp

2、作為項目的開發依賴安裝

1 $ npm install --save-dev gulp

3、在項目根目錄下創建 gulpfile.js 的文件

1 var gulp = require(‘gulp‘)
2 
3 gulp.task(‘default‘,function(){
4      //將你的默認任務代碼放在這裏
5 })

4、運行gulp:

$ gulp

以下文章參考來源：作者：Rin陽 鏈接：https://www.jianshu.com/p/98db023b5b89

二、前端自動化Gulp工具常用插件

1、gulp-uglify(JS壓縮)

gulp-uglify安裝：

npm install --save-dev gulp-uglify

gulp-uglify用來壓縮js文件，使用的是uglify引擎

var gulp = require(‘gulp‘);  //加載gulp
var uglify = require(‘gulp-uglify‘);  //加載js壓縮

// 定義一個任務 minifyjs
gulp.task(‘minifyjs‘, function () {
    gulp.src([‘js/*.js‘,‘!js/*.min.js‘])  //獲取文件，同時過濾掉.min.js文件
        .pipe(uglify())   //壓縮
        .pipe(gulp.dest(‘dist/js‘));   //輸出
});
 

2、gulp-minify-css(css壓縮)

gulp-minify-css安裝：

npm install --save-dev gulp-minify-css

可以使用它來壓縮css文件

var gulp = require(‘gulp‘);
var minify = require(‘gulp-minify-css‘);

gulp.task(‘cssmini‘, function () {
    gulp.src([‘css/*.css‘, ‘!css/*.min.css‘])  //要壓縮的css
        .pipe(minify())
        .pipe(gulp.dest(‘dist/css‘));
});
 

3、gulp-minify-html(html壓縮)

gulp-minify-html 安裝：

npm install --save-dev gulp-minify-html

可以使用它來壓縮html文件

var gulp = require(‘gulp‘);
var htmlmini = require(‘gulp-minify-html‘);

gulp.task(‘htmlmini‘, function () {
    gulp.src(‘*.html‘)
        .pipe(htmlmini())
        .pipe(gulp.dest(‘dist/minihtml‘));
})

4、gulp-imagemin(圖片壓縮)

gulp-minify-html 安裝：

npm install --save-dev gulp-imagemin

可以使用gulp-imagemin的插件來壓縮jpg、png、gif等圖片。（imagemin也是有插件的，是基於imagemin產生的插件，所以前綴是imagenin開頭）

壓縮png插件-imagemin-pngquant安裝：

npm install --save-dev imagemin-pngquant

gulipfile.js:

var gulp = require(‘gulp‘);
var imagemin = require(‘gulp-imagemin‘);
var pngquant = require(‘imagemin-pngquant‘); //png圖片壓縮插件

gulp.task(‘default‘, function () {
    return gulp.src(‘src/images/*‘)
        .pipe(imagemin({
            progressive: true,
            use: [pngquant()] //使用pngquant來壓縮png圖片
        }))
        .pipe(gulp.dest(‘dist/imgmini‘));
});

5、gulp-concat(文件合並)
gulp-concat 安裝：

npm install --save-dev gulp-concat

合並css與js文件，減少http請求

var gulp = require(‘gulp‘);
var concat = require("gulp-concat");
 
gulp.task(‘concat‘, function () {
    gulp.src(‘js/*.js‘)  //要合並的文件
    .pipe(concat(‘all.min.js‘))  // 合並匹配到的js文件並命名為 "all.js"
    .pipe(uglify()) //壓縮
    .pipe(gulp.dest(‘dist/js‘)); //輸出
});

6、gulp-css-spriter(合成雪碧圖)

gulp-css-spriter安裝：

npm install gulp-css-spriter

gulp.task(‘spriter‘,function(){
    gulp.src(‘./src/assets/css/user.css‘)
        .pipe(spriter({
            ‘spriteSheet‘:‘dist/imgmin/spritesheet.png‘,// 這是雪碧圖自動合成的圖
            ‘pathToSpriteSheetFromCSS‘:‘../../../dist/imgmin/spritesheet.png‘// 這是在css引用的圖片路徑
        }))
        .pipe(gulp.dest(‘./dist/css‘));// 輸出
})

gulp.task(‘build‘,[‘minifyjs‘,‘imagemin‘,‘cssmin‘]);
// 監聽文件變化
 gulp.task(‘watch‘, function () {     gulp.watch([‘static/mui/js/*.js‘,‘static/*.js‘,‘!static/mui/js/*.min.js‘,‘src/assets/img/*‘], [‘build‘]);
// });
gulp.task(‘default‘, [‘build‘,‘watch‘]);

gulp.js 自動化構建工具學習入門