gulp 实例 demo

今天专门拿一个小页面来当 demo 来测试一下 gulp 的实际应用。过程中自然是各种小问题陆续呈现、各种自我需求不断促使去完善。目前折腾出一个为自己所需的、较为完整的 demo ，准备当作后续模板改编应用。

走一次顺序：

局部安装

新建目录 gulp_test ，并在该目录下局部安装 gulp ：

npm install gulp --save-dev

局部安装完后，目录 gulp_test 下出现文件夹 node_modules 。

安装插件

所需要的插件简介：

//引入组件 var gulp = require('gulp'), imagemin = require('gulp-imagemin'), //图片压缩 // sass = require('gulp-ruby-sass'), //sass minifycss = require('gulp-minify-css'), //css压缩 // jshint = require('gulp-jshint'), //js检查 uglify = require('gulp-uglify'), //js压缩 rename = require('gulp-rename'), //重命名 concat = require('gulp-concat'), //合并文件 clean = require('gulp-clean'); //清空文件夹 htmlmin = require('gulp-htmlmin'); //html 处理

目录 gulp_test 下安装插件：

npm install gulp-minify-css gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-rename gulp-htmlmin --save-dev

安装完插件后，目录 node_modules 下多了7个插件的相应文件夹。

创建项目目录结构

1. 
   
2. 在项目根目录 gulp_test 下，新建 gulpfile.js 文件；
3. 在项目根目录 gulp_test 下，新建文件夹 src ,用于存放生产环境代码，并把自己的项目代码放进去；
4. 在项目根目录 gulp_test 下，新建文件夹 dist ,用于存放被 gulp 处理过的发布环境代码；
   此时的项目代码结构为：

编辑 gulpfile.js 文件

直接上 code ，里面有详细注释：

//引入组件 var gulp = require('gulp'), imagemin = require('gulp-imagemin'), //图片压缩 // sass = require('gulp-ruby-sass'), //sass minifycss = require('gulp-minify-css'), //css压缩 // jshint = require('gulp-jshint'), //js检查 uglify = require('gulp-uglify'), //js压缩 rename = require('gulp-rename'), //重命名 concat = require('gulp-concat'), //合并文件 clean = require('gulp-clean'); //清空文件夹 htmlmin = require('gulp-htmlmin'); //html 处理 //css 压缩 gulp.task('minifycss',function() { var cssSrc = './src/css/.css', cssDst = './dist/css'; return gulp.src(cssSrc) //被压缩的文件 .pipe(rename({ suffix: '.min' })) .pipe(minifycss()) //执行压缩 .pipe(gulp.dest(cssDst)); //输出文件夹 }); // 图片处理 gulp.task('imagemin',function(){ var imgSrc = './src/images/', imgDst = './dist/images'; return gulp.src(imgSrc) .pipe(imagemin()) .pipe(gulp.dest(imgDst)); }); // js处理 gulp.task('uglify',function () { var jsSrc = './src/js/.js', jsDst ='./dist/js'; return gulp.src(jsSrc) /.pipe(jshint('.jshintrc')) .pipe(jshint.reporter('default'))/ // .pipe(concat('main.js')) // .pipe(gulp.dest(jsDst)) .pipe(rename({ suffix: '.min' })) .pipe(uglify()) .pipe(gulp.dest(jsDst)); }); //html 处理 gulp.task('htmlmin', function () { var options = { removeComments: true,//清除HTML注释 collapseWhitespace: true,//压缩HTML collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input /> removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input /> removeScriptTypeAttributes: true,//删除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css" minifyJS: true,//压缩页面JS minifyCSS: true//压缩页面CSS }; var htmlSrc = './src/.html', htmlDst = './dist'; gulp.src(htmlSrc) .pipe(htmlmin(options)) .pipe(gulp.dest(htmlDst));//同名的html,会直接替换 }); // clean被执行时,先清空对应目录下图片、样式、js gulp.task('clean',function() { return gulp.src(['./dist/css', './dist/js', './dist/images'], {read: false}) .pipe(clean()); }); //watch // gulp.watch('./src/css/.css', ['minifycss']); gulp.task('watch',function(){ //css gulp.watch('./src/css/.css', ['minifycss']); //css gulp.watch('./src/js/.js', ['uglify']); //css gulp.watch('./src/images/', ['imagemin']); //css gulp.watch('./src/*.html', ['htmlmin']); }); // 默认预设任务 清空图片、样式、js并重建 运行语句 gulp gulp.task('default', ['clean'],function(){ gulp.start('minifycss','uglify','imagemin','htmlmin','watch'); });

执行 gulp

在根目录下，执行命令：

gulp

成功之后，会在 dist 文件夹下生成已经被处理过各文件；
命令行显示如下、并且一直监视 watch 着指定的文件是否改动保存过：

guojc@LAPTOP-LJ1HC4HN /F/GulpProjects/gulp_test $ gulp [22:41:55] Using gulpfile f:\GulpProjects\gulp_test\gulpfile.js [22:41:55] Starting 'clean'... [22:41:55] Finished 'clean' after 16 ms [22:41:55] Starting 'default'... [22:41:55] Starting 'minifycss'... [22:41:55] Starting 'uglify'... [22:41:55] Starting 'imagemin'... [22:41:55] Starting 'htmlmin'... [22:41:55] Finished 'htmlmin' after 2.17 ms [22:41:55] Starting 'watch'... [22:41:55] Finished 'watch' after 39 ms [22:41:55] Finished 'default' after 59 ms [22:41:57] Finished 'minifycss' after 1.45 s [22:41:57] Finished 'uglify' after 1.55 s [22:41:57] gulp-imagemin: Minified 17 images (saved 22.24 kB - 43%) [22:41:57] Finished 'imagemin' after 2.09 s

此时的目录结构，原本为空的文件夹 dist 目录，里面出现了被 gulp 处理过各文件。

遇到的一些问题

• 
  
• 安装完gulp后，运行gulp。提示’gulp’ 不是内部或外部命令，也不是可运行的程序或批处理文件。尝试下npm install -g gulp //全局安装gulp。
  
• 各任务 task 是异步执行的，出现过报错，大概是文件不存在、无法处理；只要在各任务 task 的 pipe管道 前加上 return 即可。
• 将多个监视放在一个任务 task里面时，忘记把该名为 watch 的任务 task 放在：默认预设任务 default 的数组里面；导致文件修改保存后没被监视到。
• 注意 dist 和 src 中代码里的引用的路径、文件名的问题。

更多 gulp 的使用，还得继续在实践应用中摸索啦！

转载地址：http://gjincai.github.io/2016/03/15/gulp-%E5%AE%9E%E4%BE%8B-demo/