目前最知名的构建工具：Gulp、Grunt、NPM+Webpack；grunt是前端工程的先驱Gulp是比较自然的基于流的任务连接方式Webpack是最年轻的，擅长依赖管理，稍微配置比较复杂的推荐使用Gulp。Gulp基于nodejs中的stream，效率更高，语法更自然。它不需要编写复杂的配置文件。Gulp的基本安装是基于Node.js的，需要安装Node.js1。为了保证依赖环境是正确的，我们先做几个简单的命令检查。leo@leo-HP-Pavilion-dv4-Notebook-PC:~$node-vv4.2.6Node是一个基于GoogleV8引擎的解释器，用于检测Node是否已经安装。如果安装正确，会看到安装的Node版本号为2。接下来看npm，它是node的一个包管理工具。可以用它来安装gulpleo@leo-HP-Pavilion-dv4-Notebook-PC需要的包：~$npm-v3.5.2这样也可以得到npm的版本号。安装Node时，已经自动安装了npm3，gulpnpminstall-ggulpleo@leo-HP-Pavilion-dv4-Notebook-PC:~$gulp-v[20:37:10]CLIversion3.9.1获取版本号gulp的安装，确认安装成功4.切换到你的项目根目录，运行npminstallgulp--save-dev//在项目下部分安装特定的gulp功能插件5.安装gulp功能插件依赖packagenpminstallgulp-jshintgulp-sassgulp-concatgulp-uglifygulp-rename--save-devgulp功能模块文件将放在项目所在目录的./node_modules下。6、我们目前使用的一些简单的功能：检查Javascript编译Sass文件合并Javascript压缩合并重命名Javascript新建一个gulpfile.js配置文件，放在项目根目录下。生成这个文件├──node_modules组件包目录├──dist**发布环境**│├──css样式文件（style.cssstyle.min.css）│├──images图片文件（压缩图片/合成图片）)│├──index.html静态页面文件（压缩后的html）│└──jsjs文件（main.jsmain.min.js）├──gulpfile.jsgulp配置文件├──package.json依赖模块json文件，项目目录下npminstall会安装项目的所有依赖模块，简化项目的安装过程└──src**开发环境**├──images图片文件├──index.html静态文件├──jsjs文件└──sasssass文件现在我们开始编写gulpfile.js文件来分配gulp执行任务，gulpfile.js的内容如下：//importgulpvargulp=require('gulp');//导入组件varjshint=require('gulp-jshint');//检查jsvarsass=require('gulp-sass');//编译Sassvarconcat=require('gulp-concat');//合并varuglify=require('gulp-uglify');//压缩JSvarrename=require('gulp-rename');//重命名//检查js脚本的任务gulp.task('lint',function(){gulp.src('./js/*.js')//可配置检查的具体名称script.pipe(jshint()).pipe(jshint.reporter('default'));});//编译Sassgulp.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(重命名('all.min.js')).pipe(uglify()).pipe(gulp.dest('./dist'));console.log('gulp任务完成');//fromDefinereminderinformation});....//其他任务类似//定义默认任务，执行gulp会自动执行的任务gulp.task('default',function(){gulp.run('lint','sass','scripts');//监听js文件变化，当文件变化时，任务会自动执行gulp.watch('./js/*.js',function(){gulp.运行('lint','脚本');});});7、现在回到命令行窗口，可以直接运行gulp任务gulp会执行定义好的默认任务，和下面的命令gulpdefault意义相同当然，我们可以运行gulpfile.js中定义的任何任务，比如现在单独运行sass任务：gulpsass8，编译会显示Finished，如果你的JS有什么问题，它会提醒你，避免不必要的错误，很贴心和常用提醒：禁止在同一行声明多个变量。请使用===/!==来比较true/false或数值。使用对象文字而不是新数组。不要使用全局函数。Switch语句必须有默认的分支功能，不应使用。有时有返回值，有时没有返回值for循环必须使用大括号if语句必须使用大括号for-in循环中的变量应该使用var关键字明确限定作用域，避免作用域污染9.gulp的插件很多，可以根据自己的需要添加任务需要常用的gulp插件参考gulp-imagemin：压缩图片gulp-ruby-sass：支持sass，安装此版本需要安装rubygulp-minify-css：compresscssgulp-jshint：勾选jsgulp-uglify：压缩jsgulp-concat:mergefilesgulp-rename:重命名文件gulp-htmlmin:压缩htmlgulp-clean:清空文件夹gulp-livereload:服务端控制客户端同步刷新（需要配合chrome插件LiveReload和tiny-升）
