gulp前端自动化构建工具使用

（1）新建项目目录gulp_web

（2）项目目录下建目录src里面存放须要进行gulp处理的文件目录及文件

（3）gulpfile.js文件内容为声明须要打包应用的gulp组件及打包文件路径和打包任务，好比：

// 引入 gulp
var gulp = require('gulp'); // 引入组件
var jshint = require('gulp-jshint'); var less = require('gulp-less'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); // 检查脚本
gulp.task('lint', function() { gulp.src('src/js/*.js') //该任务针对的文件
        .pipe(jshint())  //该任务调用的模块
        .pipe(jshint.reporter('default')); }); // 编译Sass
gulp.task('less', function() { gulp.src('src/less/*.less') .pipe(less()) .pipe(gulp.dest('./dist/css')); }); // 合并，压缩文件
gulp.task('scripts', function() { gulp.src('src/js/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('./dist')) .pipe(rename('all.min.js')) .pipe(uglify()) .pipe(gulp.dest('./dist')); }); // 默认任务
gulp.task('fx_web', function(){ gulp.run('lint', 'less', 'scripts'); // 监听js文件变化
    gulp.watch('src/js/*.js', function(){ gulp.run('lint', 'less', 'scripts'); }); // 监听less文件变化
    gulp.watch('src/less/*.less', function(){ gulp.run('lint', 'less', 'scripts'); }); });

 

（4）在安装部署nodejs环境前提下，进入cmd命令行执行到项目根目录：f:\gulp_web>

（5）f:\gulp_web>npm init 一路enter键初始化打包信息，生成package.json文件，内容如：

　　

{ "name": "gulp_web", "version": "1.0.0", "description": "", "main": "gulpfile.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

（6）f:\gulp_web>npm install --save-dev gulp 执行安装gulp组件，结果会在项目根目录生成node_modules目录。

注意gulp的安装包括全局安装和项目目录安装：

在系统管理员cmd默认路径下全局安装请输入
npm install -g gulp
在项目目录安装请输入
npm install --save-dev gulp

 

（7）根据上面gulpfile.js文件中所应用的声明组件：

// 引入组件
var jshint = require('gulp-jshint'); var less = require('gulp-less'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename');

按需安装组件，以下：
npm install --save-dev jshint gulp-jshint

npm install --save-dev less gulp-less

npm install --save-dev concat gulp-concat

npm install --save-dev uglify gulp-uglify

npm install --save-dev rename gulp-rename

(8)以上组件所有安装完成后，f:\gulp_web>gulp fx_web 执行打包任务，在gulpfile.jf文件中声明：

// 默认任务
gulp.task('fx_web', function(){ gulp.run('lint', 'less', 'scripts'); // 监听js文件变化
    gulp.watch('src/js/*.js', function(){ gulp.run('lint', 'less', 'scripts'); }); // 监听less文件变化
    gulp.watch('src/less/*.less', function(){ gulp.run('lint', 'less', 'scripts'); }); });

（9）若是上面任务执行顺利，会出现以下画面，并在根目录生成目录dist存放gulp处理事后的文件及目录。

 

 

最后gulp自动化构建成功。

下面摘录其余网友的gulp组件说明：

必备插件

gulp-htmlmin 看到名字就能知道，这个插件是用来压缩 HTML。PS：注释啥的均可以去掉哦，看文档get更多技能哈
gulp-imagemin 除了能压缩常见的图片格式，还能压缩 SVG，叼叼的~
gulp-clean-css 压缩 CSS。我本来推荐的是 gulp-minify-css，结果其首页中已建议改用gulp-clean-css...
gulp-uglify 专业压缩 Javascript
gulp-concat 上面几个都是压缩，这插件是管合并的...恭喜，“减小网络请求”的成就达成:)
gulp-autoprefixer 给 CSS 增长前缀。解决某些CSS属性不是标准属性，有各类浏览器前缀的状况，灰常有用
gulp-rename 修改文件名称。好比有时咱们须要把app.js改为app.min.js，瞬间高级了
gulp-util 最基础的工具，但俺只用来打日志...

经常使用插件

run-sequence gulp 的 task 都是并行(异步)执行，若是碰见须要串行的场景，那么这个插件就是必备了。偶的使用场景是：处理(压缩、合并等等) CSS/JS、再gulp-rev、再上传 CDN；而后使用 CDN的地址替换 HTML 中的 CSS/JS 地址，再压缩 HTML。那么替换 HTML 这步须在以前的工做处理完后再执行。 ** 最后要说，gulp4.0发布后，不须要RS也能够搞定串行任务了 **
del / gulp-clean 删除。俺的使用场景是：JS/CSS 文件都会在压缩后使用gulp-rev，即文件名被hash，而后再上传到 CDN，最后俺再使用 删除插件 把本地压缩后的文件删除掉，不用多余保存。
gulp-rev 把静态文件名改为hash的形式。
gulp-rev-replace 配合 gulp-rev 使用，拿到生成的 manifest。json 后替换对应的文件名称。
gulp-rev-collector 到线上环境前，我会用来配合gulp-rev使用，替换 HTML 中的路径
gulp-rev-append 给页面引用的静态文件增长hash后缀，避免被浏览器缓存...固然，若是是使用 CDN，这个套路就不行了
gulp-connect / gulp-livereload LiveReload 的俩款插件都值得拥有，不过都各稍有学习成本，看看文档就明白鸟
gulp-sourcemaps 处理 JavaScript 时生成 SourceMap；若是你不了解 SourceMap，能够看看这篇阮一峰大神的《Source Map 详解》
gulp-load-plugins 帮忙偷懒用的，能够帮咱们加载插件，不用require或者import...固然，俺我的感受用了这个插件后，阅读gulpfile.js的可读性差了，鱼和熊掌不可兼得:(
gulp-jshint JavaScript 代码校验
gulp-sass / gulp-less 写 CSS 的同窗都懂哈

进阶插件

babel JS 语法新特性用起来。这个插件可让咱们用新的 标准/特性/提案 写 JavaScript 代码，而后再向下 转换编译，最终生成随处可用的 JavaScript 代码。更通俗的说话就是：能够用新的规范写代码，通过 babel 编译后生成没有兼容问题的代码。gulp-flatten 移动指定文件，不想压缩或者合并的时候，直接用这个插件把对应文件移动到指定文件夹。俺偶尔在内部项目会偷懒用上，图方便:)gulp-coffee CoffeeScript 值得去了解gulp-markdown-pdf 把 Markdown 编译为 PDFgulp-markdown 写手的福音，能够把 Markdown 转成 HTMLgulp-html2md 把 HTML 编译为 Markdowngulp-tinypng 超屌的图片压缩工具，使用 Tinypng 引擎。PS：由于 Tinypng 免费账号有月限制，因此使用使需注意。sprity 生成雪碧图。稍有点学习成本，仔细阅读文档便可。gulp-if 能够在 pipe 里面写点逻辑了，屌不屌。举例：好比处理 ./pub/*.js，若是文件名称是 xxx.js，那么不处理；更能够用来区分当前是开发环境仍是生产环境。gulp-file-include 俺搞内部项目的时候会用到，让 HTML 组件化的第一小步gulp-git 直接在 Build 时把代码都提交到 git上了...特么劳资懒起来连我本身都惧怕gulp-qiniu 用于把指定文件上传至七牛的指定路径下(PS:首先，你得有本身的七牛帐号和空间)gulp-notify 在控制台中加入文字描述，build 的时候更高级有木有。固然，当须要的时候把错误信息也展现出来会颇有帮助。更高级的功能就须要你查看其文档了~gulp-plumber gulp 的错误处理有点坑，假如发生错误进程就挂了。相对的解决办法很多，可是这个是我我的比较推荐的，比特么在容易出错的地方写错误监听靠谱。因此这个插件能够阻止 gulp 插件发生错误致使进程退出并输出错误日志。