gulp构建工具之项目体验

首先确保你已经正确安装了nodejs环境。

1、新建一个空的项目根目录

2、在根目录下创建package.json，根据项目需要，自定义配置好package.json

{
  "private": "true",
  "engines": {
    "node": ">=0.10.0",
    "npm": ">=2.5.0"
  },
  "dependencies": {
    "amd-optimize": "^0.6.1",
    "bootstrap": "3.3.4",
    "jquery": "2.1.3"
  },
  "devDependencies": {
    "browser-sync": "^2.5.3",
    "del": "^1.1.1",
    "gulp": "^3.8.11",
    "gulp-autoprefixer": "^2.1.0",
    "gulp-cache": "^0.2.8",
    "gulp-changed": "^1.3.2",
    "gulp-jscs": "^4.0.0",
    "gulp-cloudfront": "^0.0.14",
    "gulp-concat": "^2.5.2",
    "gulp-jshint": "^2.0.4",
    "gulp-clean-css": "^3.4.2",
    "gulp-clean": "^0.3.2",
    "gulp-csscomb": "^3.0.3",
    "gulp-cssmin": "^0.1.6",
    "gulp-data": "^1.2.1",
    "gulp-ejs": "^2.3.0",
    "gulp-gh-pages": "^0.5.0",
    "gulp-htmlmin": "^1.1.1",
    "gulp-if": "^1.2.5",
    "gulp-imagemin": "^2.2.1",
    "gulp-jade": "^1.0.0",
    "gulp-less": "^3.0.2",
    "gulp-watch": "^4.3.11",
    "gulp-load-plugins": "^0.9.0",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-cssnano": "^2.1.2",
    "gulp-replace": "^0.5.3",
    "gulp-sourcemaps": "^1.5.1",
    "gulp-uglify": "^1.1.0",
    "gulp-css-spriter": "^0.4.0",
    "gulp-util": "^3.0.4",
    "http-proxy-middleware": "^0.17.3",
    "merge-stream": "^0.1.7",
    "minimist": "^1.1.1",
    "mockjs": "^1.0.1-beta3",
    "psi": "^1.0.6",
    "run-sequence": "^1.0.2"
  },
  "name": "exit",
  "version": "1.0.0",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

3、项目根目录下安装gulp

• 全局方式安装gulp：
  npm install -g gulp
• 全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：
  npm install gulp
• 如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上–save-dev：
  npm install gulp --save-dev

完成后会生成node_modules文件夹。

4、开始使用gulp

目录结构：

/**
 * Created by hh.todd@qq.com on 2017/6/21.
 */
var gulp = require('gulp'),
    plugins = require("gulp-load-plugins")({
        pattern: '*' //让gulp-load-plugins插件能匹配除了gulp插件之外的其他插件
    }),
    path = {
        html: 'html/**/*.html',
        htmlDir: 'dest/',
        css: 'css/*.css',
        cssDir: 'dest/css',
        less: 'less/*.less',
        js: 'js/**/*.js',
        jsDir: 'dest/js',
        images: 'images/*.+(jpg|png|gif|svg)',
        imagesDir: 'dest/images'
    };

//压缩css,压缩后的文件放入dest/css
gulp.task('minifycss', function () {
    return gulp.src(path.css)
        .pipe(plugins.cssmin()) //压缩
        .pipe(gulp.dest(path.cssDir));//输出
});

//合并并压缩css，合并压缩后的文件放入dest/css
gulp.task('concatminifycss', function () {
    return gulp.src(path.css)
        .pipe(plugins.concat('main.css'))    //合并所有css到main.css
        //.pipe(gulp.dest(path.cssDir))    //输出main.css到文件夹
        //.pipe(plugins.rename({suffix: '.min'}))   //rename压缩后的文件名
        .pipe(plugins.cssmin())//压缩
        .pipe(gulp.dest(path.cssDir));//输出
});

//压缩js，压缩后的文件放入dest/js
gulp.task('minifyjs', function () {
    return gulp.src(path.js)
        .pipe(plugins.uglify())//压缩
        .pipe(gulp.dest(path.jsDir));//输出
});

//合并并压缩js，合并压缩后的文件放入dest/js
gulp.task('concatminifyjs', function () {
    return gulp.src(path.js)
        .pipe(plugins.concat('main.js'))    //合并所有js到main.js
        .pipe(gulp.dest(path.jsDir))    //输出main.js到文件夹
        .pipe(plugins.rename({suffix: '.min'}))   //rename压缩后的文件名
        .pipe(plugins.uglify())//压缩
        .pipe(gulp.dest(path.jsDir));//输出
});
//合并并压缩html，合并压缩后的文件放入dest/
gulp.task('html', function () {
    gulp.src(path.html)
        .pipe(plugins.replace('__VERSION', Date.now().toString(16)))
        .pipe(plugins.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(gulp.dest(path.htmlDir))
        .pipe(plugins.browserSync.stream());
});
//压缩图片，压缩后的文件放入dest/images
gulp.task('image', function () {
    gulp.src(path.images)
        .pipe(plugins.imagemin({
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
        }))
        .pipe(gulp.dest(path.imagesDir));//输出
});

//执行压缩前，先删除dest文件夹里的内容
gulp.task('clean', function (cb) {
    plugins.del(['dest/*'], cb)
});

//编译less到css
gulp.task("less", function () {
    gulp.src(path.less)
        .pipe(plugins.less())
        .pipe(gulp.dest(path.cssDir));

});
//监视文件的变化
gulp.task("watch", function () {
    gulp.watch(path.less, ['less']);
    gulp.watch(path.css, ['concatminifycss']);
    gulp.watch(path.html, ['html']);
    gulp.watch(path.js, ['minifyjs']);
    gulp.watch(path.images, ['image']);
});
gulp.task("build", ["clean"], function (cb) {
    plugins.runSequence(['concatminifycss', 'image', 'less', 'minifyjs', 'html', "watch"], cb);
});
//同步刷新
gulp.task("serve", ["build"], function () {
    plugins.browserSync({
        //files: '/build/**', //监听整个项目
        open: 'local', // 'external' 打开外部URL, 'local' 打开本地主机URL
//        https: true,
        port: 80,
        online: false,
        notify: false,
        logLevel: "info",
        logPrefix: "test",
        logConnections: true, //日志中记录连接
        logFileChanges: true, //日志信息有关更改的文件
        scrollProportionally: false, //视口同步到顶部位置
        ghostMode: {
            clicks: false,
            forms: false,
            scroll: false
        },
        server: {
            baseDir: './dest'
            //middleware: middleware
        }
    });

});

//默认命令，在cmd中输入gulp后，执行的就是这个命令
gulp.task('default', ['serve']);

参考博客：
http://www.mamicode.com/info-detail-1221706.html
http://www.cnblogs.com/2050/p/4198792.html