目前最知名的构建工具： Gulp、Grunt、NPM + Webpack；
grunt是前端工程化的先驱
gulp更自然基于流的方式连接任务
Webpack最年轻，擅长用于依赖管理，配置稍较复杂
推荐使用Gulp，Gulp基于nodejs中stream，效率更好语法更自然,不需要编写复杂的配置文件
基础安装
Gulp是基于Node.js的，需要要安装Node.js
1、为了确保依赖环境正确，我们先执行几个简单的命令检查。
1 2
| leo@leo-HP-Pavilion-dv4-Notebook-PC:~$ node -v v4.2.6
|
Node是一个基于Google V8引擎建立的一个解释器
检测Node是否已经安装，如果正确安装的话你会看到所安装的Node的版本号
2、接下来看看npm，它是node的包管理工具，可以利用它安装gulp所需的包
1 2
| leo@leo-HP-Pavilion-dv4-Notebook-PC:~$ npm -v 3.5.2
|
这同样能得到npm的版本号，装Node时已经自动安装了npm
3、开始安装Gulp
1 2 3
| npm install -g gulp leo@leo-HP-Pavilion-dv4-Notebook-PC:~$ gulp -v [20:37:10] CLI version 3.9.1
|
得到gulp的版本号，确认安装成功
4、切换到你的在项目根文件夹下，运行
1
| npm install gulp --save-dev //将具体的gulp功能插件局部安装项目下
|
5、安装gulp功能插件依赖包
1
| npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename--save-dev
|
gulp功能模块的文件会放在项目所在的目录的./node_modules下
6、我们目前先使用一些简单的功能:
- 检查
Javascript
- 编译
Sass文件
- 合并
Javascript
- 压缩合并并重命名
Javascript
新建gulpfile.js配置文件放在项目根目录下，整个项目目录结构如下:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| . ├── .git 通过git进行版本控制,项目自动生成这个文件 ├── node_modules 组件包目录 ├── dist **发布环境** │ ├── css 样式文件(style.css style.min.css) │ ├── images 图片文件(压缩图片/合并后的图片) │ ├── index.html 静态页面文件(压缩html) │ └── js js文件(main.js main.min.js) ├── gulpfile.js gulp配置文件 ├── package.json 依赖模块json文件,在项目目录下npm install会安装项目所有的依赖模块，简化项目的安装程序 └── src **开发环境** ├── images 图片文件 ├── index.html 静态文件 ├── js js文件 └── sass sass文件
|
现在我们开始编写gulpfile.js文件以分配gulp执行任务，gulpfile.js内容如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
| // 引入gulp var gulp = require('gulp'); // 引入组件 var jshint = require('gulp-jshint');//检查js var sass = require('gulp-sass'); //编译Sass var concat = require('gulp-concat');//合并 var uglify = require('gulp-uglify');//压缩JS var rename = require('gulp-rename');//重命名 // 检查js脚本的任务 gulp.task('lint', function() { gulp.src('./js/*.js') //可配置检查脚本的具体名字 .pipe(jshint()) .pipe(jshint.reporter('default')); }); // 编译Sass gulp.task('sass', function() { gulp.src('./scss/*.scss') .pipe(sass()) .pipe(gulp.dest('./css')); }); // 合并，压缩js文件 // 找到js/目录下的所有js文件，合并、重命名、压缩，最后将处理完成的js存放在dist/js/目录下 gulp.task('scripts', function() { gulp.src('./js/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('./dist')) .pipe(rename('all.min.js')) .pipe(uglify()) .pipe(gulp.dest('./dist')); console.log('gulp task is done');//自定义提醒信息 }); .... // 其他任务类似 // 定义默认任务,执行gulp会自动执行的任务 gulp.task('default', function(){ gulp.run('lint', 'sass', 'scripts'); // 监听js文件变化，当文件发生变化后会自动执行任务 gulp.watch('./js/*.js', function(){ gulp.run('lint','scripts'); }); });
|
7、现在，回到命令行窗口，可以直接运行gulp任务
1 2 3 4 5
| gulp 这将执行定义的default任务，就和以下的命令式同一个意思 gulp default 当然，我们可以运行在gulpfile.js中定义的任意任务，比如，现在单独运行sass任务： gulp sass
|
8、编译会显示Finished,如果你的JS有什么不好的地方它会提醒，避免一些不必要的错误，十分贴心
常见提醒：
1 2 3 4 5 6 7 8 9
| 禁止在同一行声明多个变量 请使用 ===/!==来比较true/false或者数值 使用对象字面量替代new Array这种形式 不要使用全局函数 Switch语句必须带有default分支 函数不应该有时候有返回值，有时候没有返回值。 For循环必须使用大括号 If语句必须使用大括号 for-in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污染
|
9、gulp的插件数量很多，可以根据自己的需要进行添加任务
常用的gulp插件参考
1 2 3 4 5 6 7 8 9 10
| gulp-imagemin: 压缩图片 gulp-ruby-sass: 支持sass，安装此版本需要安装ruby gulp-minify-css: 压缩css gulp-jshint: 检查js gulp-uglify: 压缩js gulp-concat: 合并文件 gulp-rename: 重命名文件 gulp-htmlmin: 压缩html gulp-clean: 清空文件夹 gulp-livereload: 服务器控制客户端同步刷新（需配合chrome插件LiveReload及tiny-lr）
|
