gulp

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器，利用gulp可以对网站资源进行优化，提升编码效率。

gulp学习之基础

1.cnpm:淘宝镜像

npm install cnpm -g --registry=https://registry.npm.taobao.org

2.gulp安装

全局安装 gulp：$cnpm install --global gulp
作为项目的开发依赖（devDependencies）安装：$cnpminstall --save-dev gulp

3.新建package.json文件

{
  "name": "study",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-less": "^3.3.2",
    "gulp-jshint": "^2.0.4",
    "gulp-concat": "^2.6.1",
    "gulp-uglify": "3.0.0",
    "gulp-rename": "1.2.2",
    "gulp-minify-css": "1.2.4",
    "gulp-htmlmin": "3.0.0",
    "gulp-base64": "0.1.3",
    "gulp-rev": "8.0.0",//md
    "gulp-rev-collector": "1.2.2"

  },
  "devDependencies": {
    "gulp-jshint": "^2.0.4",
    "jshint": "^2.9.5"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/......"
  },
  "author": "Soniachen",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/......."
  },
  "homepage": "https://github.com/......"
}

4.安装配置项 $cnpm install

5. 新建gulpfile.js文件

//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
    less = require('gulp-less'),
    jshint = require('gulp-jshint'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    minify = require('gulp-minify-css'),
    htmlmin = require('gulp-htmlmin'),
    base64 = require('gulp-base64');
var rev = require('gulp-rev');  //- 对文件名加MD5后缀
var revCollector = require('gulp-rev-collector');    //- 路径替换

// 检查脚本
gulp.task('lint', function() {
    gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});


//定义一个testLess任务（自定义任务名称）
gulp.task('Less', function () {
    gulp.src('assets/less/*.less') //该任务针对的文件
        .pipe(base64({
            baseDir: 'yhcj',
            extensions: ['svg', 'png', /\.jpg#datauri$/i],
            exclude:    [/\.server\.(com|net)\/dynamic\//, '--live.jpg'],
            maxImageSize: 8*1024, // bytes 
            debug: true
        }))//将8KB以下的图片转换成base64编码
        .pipe(less()) //该任务调用的模块
        .pipe(minify())
        .pipe(rename({suffix:'.min'}))
        .pipe(gulp.dest('assets/css')); 
});

// 压缩JS文件
gulp.task('scripts', function() {
    gulp.src('tassets/js/*.js')
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('assets/minjs'));
});
//合并压缩JS文件
gulp.task('scripts', function() {
    gulp.src(['assets/js/a.js','assets/js/b.js'])
        .pipe(concat('c.js'))
        .pipe(gulp.dest('assets/js'))
        .pipe(rename('c.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('assets/minjs'));
});
//监听预编译文件gulp.task('watch',function(){    gulp.watch('assets/less/*.less',['Less']);});//压缩htmlgulp.task('testHtmlmin', function () {    var options = {        removeComments: true,//清除HTML注释        collapseWhitespace: false,//压缩HTML        collapseBooleanAttributes: false,//省略布尔属性的值 <input checked="true"/> ==> <input />        removeEmptyAttributes: false,//删除所有空格作属性值 <input id="" /> ==> <input />        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"        minifyJS: true,//压缩页面JS        minifyCSS: true//压缩页面CSS    };    gulp.src('Portal/a.html')        .pipe(htmlmin(options))        .pipe(rename('amin.html'))        .pipe(gulp.dest('Portal'));});//压缩图片gulp.task('build', function () {    return gulp.src('assets/css/*.min.css')        .pipe(base64({            baseDir: 'public',            extensions: ['svg', 'png', /\.jpg#datauri$/i],            exclude:    [/\.server\.(com|net)\/dynamic\//, '--live.jpg'],            maxImageSize: 8*1024, // bytes            debug: true        }))        .pipe(gulp.dest('themes/simplebootx/Public/assets/css'));});//加MD5后缀gulp.task('mdfive', function() { //- 创建一个名为 concat 的 task    gulp.src(['assets/css/*.min.css'])//- 需要处理的css文件，放到一个字符串数组里                .pipe(minify())  //- 压缩处理成一行        .pipe(rev()) //- 文件名加MD5后缀        .pipe(gulp.dest('assets/css/min'))   //- 输出文件本地        .pipe(rev.manifest())   //- 生成一个rev-manifest.json        .pipe(gulp.dest('assets/css/rev'));  //- 将 rev-manifest.json 保存到 rev 目录内});//替换页面内文件名gulp.task('rev', function() {    gulp.src(['assets/css/rev/*.json', 'head.html'])   //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件        .pipe(revCollector({            replaceReved: true        }))   //- 执行文件内css名的替换        .pipe(gulp.dest('Public')); //- 替换后的文件输出的目录});gulp.task('default',['Less']); //定义默认任务 elseTask为其他任务，该示例没有定义elseTask任务//gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数//gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组)//gulp.dest(path[, options]) 处理完后文件生成路径

学习中，欢迎指正~