gulp笔记|gulp案例教程

前端自动化工具现在是五花八门，例举：grunt、gulp、webpack、yeoman、Bower还有百度的fis。东西多但是大致的功能就是帮我们减少一些重复性的工作。这里重点就结合下gulp，如果对grunt感兴趣可以参考《grunt入门教程》，网上都说gulp比grunt优秀其实它们的用法感觉也差不多。

将以下内容保存为gulpfile.js

var gulp = require('gulp');
var cssmin = require('gulp-minify-css'); //压缩，删除注释、换行，合并选择器
var cssver = require('gulp-make-css-url-version'); //为css的url背景图片添加mdb5,防止缓存
var concat = require('gulp-concat');//合并css、js
var uglify = require('gulp-uglify'); //js压缩
var notify = require('gulp-notify'); //任务执行成功提示
var htmlmin = require('gulp-htmlmin');//对html页面压缩处理
var postcss = require('gulp-postcss'); //自动添加css前缀
var autoprefixer = require('autoprefixer-core');//自动添加css前缀
var rev = require('gulp-rev-append'); //为html的js、css添加版本号
var cheerio = require('gulp-cheerio'); //操作html的dom，目的合并多个js或者css链接
var useref = require('gulp-useref'); //将html中多个link和script各自合并成一个
var del = require('del'); //删除文件
var gulpif = require('gulp-if');
var imageMin = require('gulp-imagemin'); //图片压缩
var babel = require("gulp-babel");
var fileinclude = require('gulp-file-include');
var runSequence = require('run-sequence'); //同步执行

 

gulp.task('fileinclude', function() {
// 适配page中所有文件夹下的所有html，排除page下的include文件夹中html
  gulp.src(['view/**/*.html'])
    .pipe(fileinclude({
       prefix: '@@',
       basepath: '@file'
     }))
    .pipe(gulp.dest('src'))
    .on('end', function () {
      gulp.src('src/*.html')
    .pipe(useref())
    .pipe(gulpif('*.js', babel({presets: ['es2015']})))
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', cssmin({
       advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
       compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
       keepBreaks: false,//类型：Boolean 默认：false [是否保留换行]
       keepSpecialComments: '*'//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
     })))
     .pipe(gulpif('*.css',postcss([ autoprefixer({ browsers: ["> 0%"] }) ])))
     .pipe(gulpif('*.css',cssver()))
     .pipe(gulpif('*.html',htmlmin({
        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
     })))
     .pipe(gulpif('*.html',rev()))
   //.pipe(gulpif('*.html',cheerio(function ($, file) {
     // $('link').eq(0).remove();
     // $('head').append('<link rel="stylesheet" href="css/css.min.css?rev='+Math.random()+'">');
     // $('script').eq(0).remove();
     // $('head').append('<script src="js/all.min.js?rev='+Math.random()+'"></script>');
   //})))
    .pipe(gulp.dest('dist'))

   });
});

 

//把独立的js复制到dist/js的根目录下
gulp.task('copy', function() {
   gulp.src('src/js/*.js')
     .pipe(gulp.dest('dist/js'))
});

 

 

//图片压缩
gulp.task('img', function () {
  gulp.src('src/images/*.*')
   .pipe(imageMin({progressive: true}))
   .pipe(gulp.dest('dist/images'));
      console.log('33333333333');
});

 

//为此任务命名为watch
// gulp.task('watch',function(){
// gulp.watch('src/**/*.css',['sync']); //在css目录下的所有文件夹的后缀是css的文件，一旦修改就自动执行testCssmin任务
// gulp.watch('src/**/*.js',['sync']);
// });

 

//修改view目录下的html就自动在src根目录下生成html
gulp.task('watch_html',function(){
  gulp.watch('view/**/*.html',['fileinclude']); //在css目录下的所有文件夹的后缀是css的文件，一旦修改就自动执行testCssmin任务
});

 

//gulp的默认执行的任务就是watch任务
//gulp.task('default',['testCssmin','js','html','watch'], function() {
// // 将你的默认的任务代码放在这
//});

 

gulp.task('default',['fileinclude','img','copy'], function() {
// 将你的默认的任务代码放在这
});

在命令环境中直接输入：gulp，就能到达以下效果：

按先后顺序依次执行fileinclude、 img 、copy

———————————————以下是本人的前端自动化构建包—————————————————————-

链接: https://pan.baidu.com/s/1Qcd69Vb9i9At2lZIXN3D7g 提取码: m9i7

https://sdeno.com/wp-content/uploads/2017/09/gulp.rar

使用步骤：

1，解压目录后执行: npm install

2，编辑html文件在view目录，推荐开启监听view目录里面的html变化后自动生成更新html到src根目录下

———————————————API学习—————————————————————-

通配符路径匹配示例：

 “src/a.js”：指定具体文件；
 “*”：匹配所有文件 例：src/*.js(包含src下的所有js文件)；
 “**”：匹配0个或多个子文件夹 例：src/**/*.js(包含src的0个或多个子文件夹下的js文件)；
 “{}”：匹配多个属性 例：src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)；
 “!”：排除文件 例：!src/a.js(不包含src下的a.js文件)；

案例：
var gulp = require('gulp'),
    less = require('gulp-less');
 
gulp.task('testLess', function () {
  //gulp.src('less/test/style.less')
  gulp.src(['less/**/*.less','!less/{extend,page}/*.less'])
    .pipe(less())
    .pipe(gulp.dest('./css'));
});

gulp.task(name[, deps], fn)

说明：task定义一个gulp任务；
 name： 类型(必填)：String 指定任务的名称（不应该有空格）；
 deps： 类型(可选)：StringArray，该任务依赖的任务（注意：被依赖的任务需要返回当前任务的事件流，请参看下面示例）；
 fn： 类型(必填)：Function 该任务调用的插件操作；

gulp.task('testLess', function () {
  return gulp.src(['less/style.less']) //这里要注意，添加了return
  .pipe(less())
  .pipe(gulp.dest('./css'));
});
 
gulp.task('minicss', ['testLess'], function () { //执行完testLess任务后再执行minicss任务
  gulp.src(['css/*.css'])
  .pipe(minifyCss())
  .pipe(gulp.dest('./dist/css'));
});

gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
说明：watch方法是用于监听文件变化，文件一修改就会执行指定的任务；
glob： 需要处理的源文件匹配符路径。类型(必填)：String or StringArray；
opts： 类型(可选)：Object 具体参看https://github.com/shama/gaze；
tasks： 类型(必填)：StringArray 需要执行的任务的名称数组；
cb(event)： 类型(可选)：Function 每个文件变化执行的回调函数；

gulp.task('watch1', function () {
  gulp.watch('less/**/*.less', ['testLess']);
});
 
gulp.task('watch2', function () {
  gulp.watch('js/**/*.js', function (event) {
      console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
  });
});

 http://www.ydcss.com/archives/424