gulpjs-logo

安裝 Node

去 nodejs.org 根據系統選擇性按照教程安裝Node。

創建項目

• 創建項目文件夾

• 進入項目文件夾

• 初始化項目

  使用npm命令:npm init,根據提示完成。

安裝 Gulp

進入項目文件夾,使用Node的包管理命令npm進行安裝.

• 全局安裝

npm install -g gulp

• 項目依賴中安裝

npm install --save-dev gulp

創建Gulp配置文件

• 在項目根目錄新建配置文件gulpfile.js

設置配置信息

以常見的Gulp插件為例,如下：

1. js代碼校驗(gulp-jshint)
2. 合并js文件(gulp-concat)
3. 壓縮js代碼(gulp-uglify)
4. sass的編譯(gulp-sass)
5. less的編譯(gulp-less)
6. 壓縮css(gulp-minify-css)
7. 重命名(gulp-rename)

這些插件的安裝命令如下:

npm install gulp-jshint gulp-concat gulp-uglify gulp-sass gulp-less gulp-minify-css gulp-rename --save-dev

完整配置文件:

// 引入 gulp
var gulp = require('gulp');

// 引入組件
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');
var less = require('gulp-less');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');

// 檢查js腳本
gulp.task('lint', function() {
    gulp.src('./src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 合并,壓縮js文件
gulp.task('scripts', function() {
    gulp.src('./src/js/*.js')
        //合并js文件
        .pipe(concat('all.js'))
        //給文件添加.min后綴
        .pipe(rename({ suffix: '.min' }))
        //壓縮腳本文件
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'));
});

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

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

// 壓縮css
gulp.task('style', function() {
    gulp.src('./src/css/*.css')
        .pipe(gulp.dest('./dist/style'))
        .pipe(rename('all.min.css'))
        .pipe(minifycss())
        .pipe(gulp.dest('./dist/style'));
});

// 默認任務
gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts');

    // 監聽文件變化
    gulp.watch('./src/js/*.js', function(){
        gulp.run('lint', 'scripts');
    });
    gulp.watch('./src/sass/*.scss', function(){
        gulp.run('sass');
    });
    gulp.watch('./src/less/*.less', function(){
        gulp.run('less');
    });
    gulp.watch('./src/css/*.css', function(){
        gulp.run('style');
    });
});

原文來自:seay.me

本文采用知識共享署名-相同方式共享 4.0 國際許可協議進行許可。
基于簡書上的作品創作。 可轉載、引用，但需經本人同意后署名作者且注明文章出處，并以相同方式共享。

知識共享許可協議