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 [e-mail] 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/cssgulp.task('minifycss', function () {    return gulp.src(path.css)        .pipe(plugins.cssmin()) //压缩        .pipe(gulp.dest(path.cssDir));//输出});//合并并压缩css，合并压缩后的文件放入dest/cssgulp.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/jsgulp.task('minifyjs', function () {    return gulp.src(path.js)        .pipe(plugins.uglify())//压缩        .pipe(gulp.dest(path.jsDir));//输出});//合并并压缩js，合并压缩后的文件放入dest/jsgulp.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/imagesgulp.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到cssgulp.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