就是把在构建项目中的常用操作给简化。自动完成一系列重复操作:
入门指南:https://www.gulpjs.com.cn/docs/getting-started/
npm install -g gulp // 全局安装
在node项目根目录下创建package.json文件【若已存在则不需要】
npm init --yes
npm install gulp --save-dev
--save:表示项目依赖,可简写为 -S。项目依赖比如bootstrap库,js库,svg库等。
-dev:表示开发依赖,可简写为 -D。开发依赖比如一些项目构建工具,压缩打包工具等
var gulp = require('gulp');// 引入gulp模块 // 新建一个任务 gulp.task('say',function() { console.log(123); });
gulp say
gulp.task('copy', () => { // gulp.src相当于一个文件指针,指向这个file, // 使用pipe类似于管道流,gulp.dest()指向目标文件 // 意思是将index.html复制到dist目录下[覆盖式复制] gulp.src('./src/index.html').pipe(gulp.dest('./dist/')); }); gulp.task('reload', () => { // watch监视一个文件,并且在文件进行改动的时候做一些事情 gulp.watch('./src/index.html', gulp.parallel('copy','reload')); });
gulp reload
每当src目录下index文件发生改变,都会去并发的执行两个任务copy和reload.
gulp.task('reload', () => { // watch监视一个文件,并且在文件进行改动的时候做一些事情 gulp.watch('./src/index.html', ['copy','reload']); });
watch的第二个参数不在是一个数组,而是一个function。在上例中:
/* * @Author: iceStone * @Date: 2016-01-27 10:21:56 * @Last Modified by: iceStone * @Last Modified time: 2016-01-27 11:08:35 */ 'use strict'; /** * 1. LESS编译 压缩 合并 * 2. JS合并 压缩 混淆 * 3. img复制 * 4. html压缩 */ // 在gulpfile中先载入gulp包,因为这个包提供了一些API var gulp = require('gulp'); var less = require('gulp-less'); var cssnano = require('gulp-cssnano'); // 1. LESS编译 压缩 --合并没有必要,一般预处理CSS都可以导包 gulp.task('style', function() { // 这里是在执行style任务时自动执行的 gulp.src(['src/styles/*.less', '!src/styles/_*.less']) .pipe(less()) .pipe(cssnano()) .pipe(gulp.dest('dist/styles')) .pipe(browserSync.reload({ stream: true })); }); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); // 2. JS合并 压缩混淆 gulp.task('script', function() { gulp.src('src/scripts/*.js') .pipe(concat('all.js')) .pipe(uglify()) .pipe(gulp.dest('dist/scripts')) .pipe(browserSync.reload({ stream: true })); }); // 3. 图片复制 gulp.task('image', function() { gulp.src('src/images/*.*') .pipe(gulp.dest('dist/images')) .pipe(browserSync.reload({ stream: true })); }); var htmlmin = require('gulp-htmlmin'); // 4. HTML gulp.task('html', function() { gulp.src('src/*.html') .pipe(htmlmin({ collapseWhitespace: true, removeComments: true })) .pipe(gulp.dest('dist')) .pipe(browserSync.reload({ stream: true })); }); var browserSync = require('browser-sync'); gulp.task('serve', function() { browserSync({ server: { baseDir: ['dist'] }, }, function(err, bs) { console.log(bs.options.getIn(["urls", "local"])); }); gulp.watch('src/styles/*.less',['style']); gulp.watch('src/scripts/*.js',['script']); gulp.watch('src/images/*.*',['image']); gulp.watch('src/*.html',['html']); });