gulpjs-logo
安裝 Node
去 nodejs.org 根據(jù)系統(tǒng)選擇性按照教程安裝Node。
創(chuàng)建項(xiàng)目
創(chuàng)建項(xiàng)目文件夾
進(jìn)入項(xiàng)目文件夾
-
初始化項(xiàng)目
使用npm命令:
npm init,根據(jù)提示完成润脸。
安裝 Gulp
進(jìn)入項(xiàng)目文件夾,使用Node的包管理命令npm進(jìn)行安裝.
- 全局安裝
npm install -g gulp
- 項(xiàng)目依賴中安裝
npm install --save-dev gulp
創(chuàng)建Gulp配置文件
- 在項(xiàng)目根目錄新建配置文件
gulpfile.js
設(shè)置配置信息
以常見的Gulp插件為例,如下：
- js代碼校驗(yàn)(gulp-jshint)
- 合并js文件(gulp-concat)
- 壓縮js代碼(gulp-uglify)
- sass的編譯(gulp-sass)
- less的編譯(gulp-less)
- 壓縮css(gulp-minify-css)
- 重命名(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'));
});
// 默認(rèn)任務(wù)
gulp.task('default', function(){
gulp.run('lint', 'sass', 'scripts');
// 監(jiān)聽文件變化
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
本文采用知識(shí)共享署名-相同方式共享 4.0 國(guó)際許可協(xié)議進(jìn)行許可邢羔。
基于簡(jiǎn)書上的作品創(chuàng)作。 可轉(zhuǎn)載浮还、引用竟坛，但需經(jīng)本人同意后署名作者且注明文章出處，并以相同方式共享。
知識(shí)共享許可協(xié)議
