gulp搭建前端自動化開發環境

gulp是基於node編寫的一個構建工具，有4個主要的API：

gulp.src() - 輸出符合條件的文件

gulp.dest() - 能被pipe進來，並寫文件

gulp.task() - 定義任務

gulp.watch() - 監聽文件

 

首先，默認node環境已經安裝；

全局安裝gulp： npm i -g gulp

新建文件夾，npm初始化：npm init

做爲項目開發依賴安裝：npm i -D gulp

 

新建gulpfile.js，

 

var gulp = require('gulp');

gulp.task('default', function() {
  console.log('default');
});

 

執行命令gulp,ok。

 

通常須要區分開發和生產環境，

 

gulp.task('default', ['dev']);
gulp.task('dev', ['connect', 'watch']);
gulp.task('build', ['html-build', 'file-build'], function() {
    return gulp.src('dist/rev', { read: false })
        .pipe(clean());
});

 

須要的模塊：

gulp-connect：開發階段，由於的先後端分離的項目，因此須要一個web服務器, gulp-connect是一個帶有livereload的web服務器

gulp-changed：能夠過濾那些改動過的文件

gulp-babel:經過babel來使用新版es

gulp-sass: 編譯sass

gulp-clean: 移除文件和文件夾

gulp-rev: 給靜態資源文件加上hash

gulp-htmlmin: 壓縮html

http-proxy-middleware：一個nodeJS代理的中間件

gulp-plumber：處理pipe破裂致使的錯誤

gulp-rev-collector : 從manifest中收集數據，而後替換在html模版裏的連接

gulp-sourcemaps： 生產sourcemaps

gulp-tag-include-html: 能夠使用include標籤來將html元素引入到別的文件中

gulp-trim-js-css: 將style標籤移動到head標籤中,支持sass語法編譯 將script標籤移動到body的最後，支持es2015語法編譯

rimraf: 爲node實現的unix命令rm -rf

 

npm install --save-dev gulp-connect ...

引入，

var sass = require('gulp-sass'),
    proxy = require('http-proxy-middleware'),
    sourcemaps = require('gulp-sourcemaps'),
    babel = require('gulp-babel'),
    clean = require('gulp-clean'),
    rev = require('gulp-rev'),
    revCollector = require('gulp-rev-collector'),
    htmlmin = require('gulp-htmlmin'),
    plumber = require('gulp-plumber'),
    include = require('gulp-tag-include-html'),
    trimJsCss = require('gulp-trim-js-css'),
    path = require('path'),
    connect = require('gulp-connect'),
    changed = require('gulp-changed'),
    DEV_PATH = path.resolve(__dirname, './dev'),
    BASENAME = path.basename(__dirname),
    DIST_PATH = path.resolve(__dirname, 'dist/www', BASENAME);

開發階段配置以下，

gulp.task('connect', function() {
    connect.server({
        root: DEV_PATH,
        port: 8080,
        livereload: true,
        middleware: function(connect, opt) { //設置代理
            return [
                proxy('/index', {
                    target: 'http://youwebsite.com',
                    changeOrigin: true
                })
            ]
        }
    });
});
// 數組裏的任務會在你當前任務運行以前完成。

gulp.task('watch', ['html', 'js', 'css', 'file'], function() {
    gulp.watch('src/**/*.html', ['html']);
    gulp.watch('src/**/*.htm', ['htm']);
    gulp.watch('src/**/*.js', ['js']);
    gulp.watch('src/**/*.{css,scss}', ['css']);
    gulp.watch('src/**/*.!(html|htm|js|css|scss)', ['file']);
});

gulp.task('html', function() {
    return gulp.src('src/**/*.html')
        .pipe(changed('dev', { hasChanged: changed.compareLastModifiedTime }))
        .pipe(plumber())
        .pipe(include({
            begin: '<%',
            end: '%>'
        }))
        .pipe(trimJsCss())
        .pipe(gulp.dest('dev'))
        .pipe(connect.reload());
});

gulp.task('htm', ['html-all'], function(cb) {
    return gulp.src('src/**/*.html')
        .pipe(connect.reload());
});

gulp.task('html-all', function() {
    return gulp.src('src/**/*.html')
        .pipe(plumber())
        .pipe(include({
            begin: '<%',
            end: '%>'
        }))
        .pipe(trimJsCss())
        .pipe(gulp.dest('dev'));
});

gulp.task('js', function() {
    return gulp.src(['src/**/*.js', '!src/**/lib/**/*.*'])
        .pipe(changed('dev', { hasChanged: changed.compareLastModifiedTime }))
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(babel({ presets: ['es2015'] }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dev'))
        .pipe(connect.reload());
});

gulp.task('css', function() {
    return gulp.src(['src/**/*.{css,scss}', '!src/**/lib/**/*.*'])
        .pipe(changed('dev/', {
            hasChanged: changed.compareLastModifiedTime, //比較修改時間
            extension: '.css' //由於是.scss與.css 比較，因此要設置文件後綴
        }))
        .pipe(plumber())
        .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
        .pipe(gulp.dest('dev'))
        .pipe(connect.reload());
});

gulp.task('file', function() {
    return gulp.src(['src/**/*.!(html|htm|js|css|scss)', 'src/**/lib/**/*.*'])
        .pipe(changed('dev/', { hasChanged: changed.compareLastModifiedTime }))
        .pipe(gulp.dest('dev'))
        .pipe(connect.reload());
});

生產階段打包時，首先定義clean-build任務，供其餘任務使用。

gulp.task('clean-build', function() {
    return gulp.src(['dist', 'dev'], { read: false })
        .pipe(clean());
});

而後分別定義css-build, file-build, js-build, html-build任務，打包獲得上線所需代碼。

gulp.task('js-build', ['clean-build'], function() {
    return gulp.src(['src/**/*.js', '!src/**/lib/**/*.*'])
        .pipe(babel({ presets: ['es2015'], minified: true, comments: false }))
        .pipe(rev())
        .pipe(gulp.dest(DIST_PATH))
        .pipe(rev.manifest())
        .pipe(gulp.dest('dist/rev/js'));
});

gulp.task('css-build', ['clean-build'], function() {
    return gulp.src(['src/**/*.{css,scss}', '!src/**/lib/**/*.*'])
        .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
        .pipe(rev())
        .pipe(gulp.dest(DIST_PATH))
        .pipe(rev.manifest())
        .pipe(gulp.dest('dist/rev/css'));
});

gulp.task('file-build', ['clean-build'], function() {
    return gulp.src(['src/**/*.!(html|htm|js|css|scss)', 'src/**/lib/**/*.*'])
        .pipe(gulp.dest(DIST_PATH));
});

 

gulp.task('html-build', ['js-build', 'css-build'], function() {
    return gulp.src(['src/**/*.html', '!src/assets/lib', '!src/assets/lib/**', 'dist/rev/**/*.json'])
        .pipe(include({
            begin: '<%',
            end: '%>'
        }))
        .pipe(revCollector())
        .pipe(trimJsCss())
        .pipe(htmlmin({
            removeComments: true, //清除HTML註釋
            collapseWhitespace: true, //壓縮HTML
            minifyJS: true, //壓縮頁面JS
            minifyCSS: true //壓縮頁面CSS
        }))
        .pipe(gulp.dest(DIST_PATH));
});