前端自動化構建工具庫之gulp

這是一款基於nodejs的前端自動化構建工具--gulp，如下是使用gulp的步驟：

1.安裝主程序，在須要編譯的目錄輸入

npm install gulp //安裝gulp插件

2.安裝經常使用插件

npm install del//清空目錄或文件用的插件
npm install gulp-concat//鏈接css或js的插件
npm install gulp-cssmin//壓縮css的插件
npm install gulp-uglify//壓縮js的插件

3.配置gulpfile.js，若是工做目錄下沒有該文件，請新建gulpfile.js，如下爲一個經常使用的參考代碼

/**
 * @author xialei <xialeistudio@gmail.com>
 */
(function () {
    "use strict";
    /**
     * 加載插件
     * @type {exports}
     */
    var gulp = require('gulp');
    var del = require('del');
    var cssmin = require('gulp-cssmin');
    var concat = require('gulp-concat');
    var uglify = require('gulp-uglify');
 
    /**
     * 清空目錄的命令
     */
    gulp.task('clean', function () {
        del(['build']);
    });
    gulp.task('css', function () {
        /**
         * 加載源代碼
         */
        return gulp.src([
            'bower_components/bootstrap/dist/css/bootstrap.min.css',
            'bower_components/font-awesome/css/font-awesome.min.css',
            'css/style.css'
        ])
        /**
         * 壓縮css
         */
            .pipe(cssmin())
        /**
         * 鏈接壓縮後的css
         */
            .pipe(concat('style.css'))
        /**
         * 輸出到目標目錄
         */
            .pipe(gulp.dest('build/css'))
    });
    gulp.task('js', function () {
        return gulp.src([
        /**
         * 加載源代碼
         */
            'bower_components/angular/angular.min.js',
            'bower_components/angular-sanitize/angular-sanitize.min.js',
            'js/main.js'])
        /**
         * 壓縮Js
         */
            .pipe(uglify())
        /**
         * 合併js
         */
            .pipe(concat('main.js'))
        /**
         * 輸出到目標目錄
         */
            .pipe(gulp.dest('build/js'))
    });
    gulp.task('img', function () {
        /**
         * 加載源文件
         */
        return gulp.src([
            'img/*.*'
        ])
        /**
         * 輸出到目標目錄
         */
            .pipe(gulp.dest('build/img'));
    });
 
    /**
     * 定義默認任務，此任務依賴於 clean,img,css,js，因此在執行
     * 本任務時會按順序先執行依賴任務
     */
    gulp.task('default', ['clean', 'img', 'css', 'js']);
})();

4.執行編譯

gulp

轉載自：天天進步一點點 》使用gulp來構建你的前端自動化工做流