- 官网：www.gulpjs.com.cn/
- 定义：
gulp将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。
常用插件
（1）run-sequence
用途
gulp.task()任务是异步运行的，默认将并行运行所有任务；任务中的步骤也是异步的，因此各个步骤也是并行的。当需要依次逐个执行，一个任务执行结束再执行另一个任务。此时引入run-sequence模块。
参数说明
/**
* @param task 可接多个任务，也可以是数组，将依次执行task1、task2，如果task2里面包含多个任务，则这些任务将一起被执行
* @param callback 回调
*/
runSequence(task1, [task2],callback)
安装
npm install --save-dev run-sequence
使用
eg1
var gulp = require('gulp');
var runSequence = require('run-sequence');
var del = require('del');
var fs = require('fs');
// This will run in this order:
// * build-clean
// * build-scripts and build-styles in parallel
// * build-html
// * Finally call the callback function
gulp.task('build', function(callback) {
runSequence('build-clean',
['build-scripts', 'build-styles'],
'build-html',
callback);
});
// configure build-clean, build-scripts, build-styles, build-html as you wish,
// but make sure they either return a stream or promise, or handle the callback
// Example:
gulp.task('build-clean', function() {
// Return the Promise from del()
return del([BUILD_DIRECTORY]);
// ^^^^^^
// This is the key here, to make sure asynchronous tasks are done!
});
gulp.task('build-scripts', function() {
// Return the stream from gulp
return gulp.src(SCRIPTS_SRC).pipe(...)...
// ^^^^^^
// This is the key here, to make sure tasks run to completion!
});
gulp.task('callback-example', function(callback) {
// Use the callback in the async function
fs.readFile('...', function(err, file) {
console.log(file);
callback();
// ^^^^^^^^^^
// This is what lets gulp know this task is complete!
});
});
eg2
var runSequence = require('run-sequence'); // 按顺序执行task
gulp.task('default', function(cb) {
runSequence(
['clean'], // 首先清理文件，否则会把新打包的文件清掉
['html', 'js_libs', 'js_main', 'css_libs', 'css_main', 'images'], // 不分先后的任务最好并行执行，提高效率
['browser', 'watch'], // 所有文件打包完毕之后启动服务打开浏览器
cb);
});
（2）gulp-rename
用途
文件重命名
安装
npm i gulp-rename
使用
eg1
/*gulp@3.9.1 + gulp-rename 实现文件重命名*/
var gulp = require('gulp');
var rename = require('gulp-rename');
/*css任务*/
gulp.task('css', function () {
return gulp.src('./app/css/*.css')
.pipe(rename({ suffix: '.min' }))/*重命名，添加一个.min的后缀*/
.pipe(gulp.dest('./dist/css'))/*输出目录*/
});
/*watch监听，不需要在cmd中重复执行gulp xxx*/
gulp.task('watch', function () {
gulp.watch('./app/css/*.css', ['css']);/*css有修改时监听*/
});
/*默认任务，启动后会执行一次*/
gulp.task('default', ['css', 'watch']);
（3）gulp-clean-css
用途
css文件压缩
安装
npm install gulp-clean-css --save-dev
使用
eg1
const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
gulp.task('minify-css', () => {
return gulp.src('styles/*.css')
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('dist'));
});
eg2
const paths=[
'src/common/a.css',
'src/common/b.css',
'src/common/c.css',
]
const output = 'libs/css'
gulp.task('test_css', function () {
return gulp
.src(paths.table_css)
.pipe(concat('test.css')) //多个文件合成一个test.css文件
.pipe(cleanCSS()) // 压缩CSS
.pipe(
rename({
suffix: '.min' // 重命名 test.min.css
})
)
.pipe(gulp.dest(output)) // 输出到此路径下
（4）gulp-uglify
用途
js文件压缩
安装
npm install --save-dev gulp-uglify
使用
eg1
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var pipeline = require('readable-stream').pipeline;
gulp.task('compress', function () {
return pipeline(
gulp.src('lib/*.js'),
uglify(),
gulp.dest('dist')
);
});
eg2
const paths=[
'src/common/a.js',
'src/common/b.js',
'src/common/c.js',
]
const output = 'libs/js'
gulp.task('ver_js', function () {
return gulp
.src(paths)
.pipe(concat('all.js')) // 多个文件合成一个文件all.js
.pipe(
rename({
suffix: '.min' // /*重命名，添加一个.min的后缀*/,即all.min.js
})
)
.pipe(gulpif(__prod__, uglify())) //压缩js
.pipe(gulpif(__prod__, stripDebug()))
.pipe(gulp.dest(output)) // 输出文件到 output 所指定的路径下
})
（5）gulp-concat
用途
将多个文件合成一个文件
安装
install gulp-concat --save-dev
使用
var concat = require('gulp-concat');
gulp.task('scripts', function() {
return gulp.src('./lib/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/'));
});
项目环境搭建
- 新建一个空文件夹 demo-gulp
npm init创建项目描述文件package.json，一路回车- 在项目目录下安装gulp
- 可指定版本如，
npm install gulp@3.9.1 --save-dev
- 可指定版本如，
- 安装插件
- 如安装
gulp-rename,npm install gulp-rename --save-dev
- 如安装
- 创建简单的html及js文件
- 要创建的文件如下：
index.html、app/css/reset.css、app/css/main.css、app/js/config.js、app/js/main.js
- 要创建的文件如下：
- 在项目根目录下新建一个
gulpfile.js文件，内容如下：
1. /*gulp@3.9.1 + gulp-rename 实现文件重命名*/
1. var gulp=require('gulp');
1. var rename=require('gulp-rename');
1. /*css任务*/
1. gulp.task('css',function(){
1. return gulp.src('./app/css/*.css')
1. .pipe(rename({suffix:'.min'}))/*重命名，添加一个.min的后缀*/
1. .pipe(gulp.dest('./dist/css'))/*输出目录*/
1. });
1. /*watch监听，不需要在cmd中重复执行gulp xxx*/
1. gulp.task('watch',function(){
1. gulp.watch('./app/css/*.css',['css']);/*css有修改时监听*/
1. });
1. /*默认任务，启动后会执行一次*/
1. gulp.task('default',['css','watch']);
- cmd中运行看效果
