前端構建工具gulp入門教程

新建Gulpfile文件，運行gulp

安裝好gulp後咱們須要告訴它要爲咱們執行哪些任務，首先，咱們本身須要弄清楚項目須要哪些任務。

• 檢查Javascript
• 編譯Sass（或Less之類的）文件
• 合併Javascript
• 壓縮並重命名合併後的Javascript

安裝依賴

npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev 

新建gulpfile文件

如今，組件都安裝完畢，咱們須要新建gulpfile文件以指定gulp須要爲咱們完成什麼任務。

gulp只有五個方法： task ， run ， watch ， src ，和 dest ，在項目根目錄新建一個js文件並命名爲 gulpfile.js ，把下面的代碼粘貼進去：

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

// 引入組件
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var gulpFilter = require('gulp-filter');
var zepto= gulpFilter('zepto.min.js');


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

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

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

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

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

 

分段解釋下這段代碼。

引入組件

var gulp = require('gulp'); var jshint = require('gulp-jshint'); var sass = require('gulp-sass'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); 

這一步，咱們引入了核心的gulp和其餘依賴組件，接下來，分開建立lint, sass, scripts 和 default這四個不一樣的任務。

Lint任務

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

Link任務會檢查 js/ 目錄下得js文件有沒有報錯或警告。

Sass任務

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

Sass任務會編譯 scss/ 目錄下的scss文件，並把編譯完成的css文件保存到 /css目錄中。

Scripts 任務

gulp.task('scripts', function() { gulp.src('./js/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('./dist')) .pipe(rename('all.min.js')) .pipe(uglify()) .pipe(gulp.dest('./dist')); }); 

scripts任務會合並 js/ 目錄下得全部得js文件並輸出到 dist/ 目錄，而後gulp會重命名、壓縮合並的文件，也輸出到 dist/ 目錄。

default任務

gulp.task('default', function(){ gulp.run('lint', 'sass', 'scripts'); gulp.watch('./js/*.js', function(){ gulp.run('lint', 'sass', 'scripts'); }); }); 

這時，咱們建立了一個基於其餘任務的default任務。使用 .run() 方法關聯和運行咱們上面定義的任務，使用 .watch() 方法去監聽指定目錄的文件變化，當有文件變化時，會運行回調定義的其餘任務。

如今，回到命令行，能夠直接運行gulp任務了。

gulp

這將執行定義的default任務，換言之，這和如下的命令式同一個意思

gulp default 

固然，咱們能夠運行在gulpfile.js中定義的任意任務，好比，如今運行sass任務：

gulp sass