gulp初学使用总结

时间：2015-12-10 19:32:44 阅读：583 评论：0 收藏：0 [点我收藏+]

标签：

之前从网上看到用gulp构建的人还是挺多的，今天试着学习了一下，基本都是从其他网站摘录的，以下是总结：

还是先贴一下项目结构吧：

技术分享

我把原始的代码都放到了assets文件里边，dist是gulp生成的images，scripts，styles，所有的*.html都发布到了根目录

一、全局安装gulp：

　　$ npm install --global gulp

二、创建package.json

　　进入项目根目录，利用npm init根据提示，首先创建package.json文件，然后根据自己的需要，导入所依赖模块，具体的包详见下文gulpfile.js

　　下载地址：https://www.npmjs.com

　　比如下载gulp-minify-css，直接执行npm install --save-dev gulp-minify-css

　　--save-dev部分最好都写上，这样能自动把模块和版本号添加到package.json里的devdependencies部分

　　依次导入所有依赖的模块。

三、在根目录创建gulpfile.js文件

　　以下是gulpfile.js的详细内容：

  1 // 载入外挂
  2 var gulp = require(‘gulp‘), 
  3     autoprefixer = require(‘gulp-autoprefixer‘), //处理浏览器前缀
  4     minifycss = require(‘gulp-minify-css‘), //压缩css
  5     jshint = require(‘gulp-jshint‘), //检测js
  6     uglify = require(‘gulp-uglify‘), //压缩js
  7     imagemin = require(‘gulp-imagemin‘), //压缩image
  8     rename = require(‘gulp-rename‘), //重命名
  9     clean = require(‘gulp-clean‘), //清理
 10     concat = require(‘gulp-concat‘), //合并
 11     notify = require(‘gulp-notify‘), //提示
 12     cache = require(‘gulp-cache‘), 
 13     livereload = require(‘gulp-livereload‘), //自动刷新
 14     rev = require(‘gulp-rev‘), //添加md5
 15     minifyhtml = require(‘gulp-minify-html‘), //压缩html
 16     revCollector = require(‘gulp-rev-collector‘);  //路径替换
 17 
 18 // 样式
 19 gulp.task(‘styles‘, function() {  
 20   return gulp.src(‘assets/css/main.css‘)
 21     .pipe(autoprefixer({
 22             browsers: [‘last 2 versions‘],
 23             cascade: true, //是否美化属性值 默认：true 像这样：
 24             //-webkit-transform: rotate(45deg);
 25             //        transform: rotate(45deg);
 26             remove:true //是否去掉不必要的前缀 默认：true 
 27         }))
 28     .pipe(gulp.dest(‘dist/styles‘))
 29     .pipe(rename({ suffix: ‘.min‘ }))
 30     .pipe(minifycss())
 31     .pipe(rev())
 32     .pipe(gulp.dest(‘dist/styles‘))
 33     .pipe(rev.manifest())//- 生成一个rev-manifest.json
 34     .pipe(gulp.dest(‘./rev/css‘))
 35     .pipe(notify({ message: ‘Styles task complete‘ }));
 36 });
 37 
 38 // 脚本
 39 gulp.task(‘scripts‘, function() {  
 40   return gulp.src([‘assets/js/vendor/*.js‘,‘assets/js/*.js‘])
 41     .pipe(jshint(‘.jshintrc‘))
 42     .pipe(jshint.reporter(‘default‘))
 43     .pipe(concat(‘main.js‘))
 44     .pipe(gulp.dest(‘dist/scripts‘))
 45     .pipe(rename({ suffix: ‘.min‘ }))
 46     .pipe(uglify())
 47     .pipe(rev())
 48     .pipe(gulp.dest(‘dist/scripts‘))
 49     .pipe(rev.manifest())//- 生成一个rev-manifest.json
 50     .pipe(gulp.dest(‘./rev/js‘))
 51     .pipe(notify({ message: ‘Scripts task complete‘ }));
 52 });
 53 
 54 // 图片
 55 gulp.task(‘images‘, function() {  
 56   return gulp.src(‘assets/img/*‘)
 57     .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
 58     .pipe(gulp.dest(‘dist/images‘))
 59     .pipe(notify({ message: ‘Images task complete‘ }));
 60 });
 61 
 62 //压缩Html/更新引入文件版本
 63 gulp.task(‘minify-html‘, function() {
 64   return gulp.src([‘rev/*/*.json‘,‘assets/*.html‘])
 65     .pipe( revCollector())
 66     .pipe(minifyhtml({
 67       conditionals: true,
 68       spare:true
 69     }))
 70     .pipe(gulp.dest(‘./‘))
 71     .pipe(notify({ message: ‘Htmls task complete‘ }));
 72 });
 73 
 74 // 清理
 75 gulp.task(‘clean‘, function() {  
 76   return gulp.src([‘dist/styles‘, ‘dist/scripts‘, ‘dist/images‘], {read: false})
 77     .pipe(clean());
 78 });
 79 
 80 // 预设任务
 81 gulp.task(‘default‘, [‘clean‘], function() {  
 82     gulp.start(‘styles‘, ‘scripts‘, ‘images‘);
 83 });
 84 
 85 // 看守
 86 gulp.task(‘watch‘, function() {
 87 
 88   // 看守所有.css档
 89   gulp.watch(‘assets/css/*.css‘, [‘styles‘]);
 90 
 91   // 看守所有.js档
 92   gulp.watch(‘assets/js/**/*.js‘, [‘scripts‘]);
 93 
 94   // 看守所有图片档
 95   gulp.watch(‘assets/img/**/*‘, [‘images‘]);
 96 
 97   //看守所有.html档
 98   gulp.watch(‘assets/*.html‘, [‘html‘]);
 99 
100   // 建立即时重整伺服器
101   var server = livereload();
102 
103   // 看守所有位在 dist/  目录下的档案，一旦有更动，便进行重整
104   gulp.watch([‘dist/**‘]).on(‘change‘, function(file) {
105     server.changed(file.path);
106   });
107 
108 });

四、执行gulp可执行gulpfile.js里所有的task，也可单独执行某一个任务，如gulp scripts

五、遇到的几个问题：

　　1、有个png图片深度压缩的依赖模块没有安装成功，npm install imagemin-pngquant --save-dev （未安装成功），因为我这个项目所有图片已经手动压缩过了，也就暂时没去管这个问题，有时间了再好好查一下吧。

　　2、检测js语法模块gulp-jshint执行的时候会报错，提示缺少.jshintrc文件，于是搜了一下需要再根目录配置一下.jshintrc　　　

{
    "bitwise" : true,
    "browser" : true,
    "curly" : true,
    "eqeqeq" : true,
    "eqnull" : true,
    "esnext" : true,
    "immed" : true,
    "jquery" : true,
    "latedef" : true,
    "newcap" : true,
    "noarg" : true,
    "node" : true,
    "strict" : false,
    "trailing" : true
}