对于脚手架工具，我们有很多grunt，gulp，fis，webpack......
这里我说一说gulp对前端页面打包的过程
首先，gulp是基于nodejs环境，故你必须装nodejs。从nodejs官网下载一个，然后配置环境变量即可。如果你要用less或sass预处理语言，请下载ruby并配置环境变量即可。
这里插入 npm的安装命令 npm install <name>安装nodejs的依赖包 例如npm install express 就会默认安装express的最新版本，也可以通过在后面加版本号的方式安装指定版本，如npm install express@3.0.6 npm install <name> -g 将包安装到全局环境中 但是代码中，直接通过require()的方式是没有办法调用全局安装的包的。全局的安装是供命令行使用的，就好像全局安装了vmarket后，就可以在命令行中直接运行vm命令 npm install <name> --save 安装的同时，将信息写入package.json中 项目路径中如果有package.json文件时，直接使用npm install方法就可以根据dependencies配置安装所有的依赖包 这样代码提交到github时，就不用提交node_modules这个文件夹了。 npm init 会引导你创建一个package.json文件，包括名称、版本、作者这些信息等 npm remove <name>移除 npm update <name>更新 npm ls 列出当前安装的了所有包 npm root 查看当前包的安装路径 npm root -g 查看全局的包的安装路径 npm help 帮助，如果要单独查看install命令的帮助，可以使用的npm help install
因为npm是nodejs自带的 所以我们不需要安装，项目开发中 运行npm init 帮你创建一个package.json
环境装好之后，下面我们来安装gulp
第一步，要安装全局的gulp 运行npm install -g gulp --save-dev
第二步，新建一个项目目录 比如： webproject，然后 cd webproject 安装项目的gulp 运行 npm install gulp --save-dev
第三部， 安装压缩html，css，js和语法检查的依赖包,(因为css我是直接写在html，故对less和其他的运用就不在此说明)
var jshint = require('gulp-jshint');//语法检查 var concat = require('gulp-concat');//合并文件 var uglify = require('gulp-uglify');//压缩代码 var rename = require('gulp-rename');//重命名 var htmlmin = require('gulp-htmlmin');//html压缩
npm install <name> --save 其中的name 填写上面的模块名
模块导进来以后，我们来写相应的模块运行代码
// 语法检查 gulp.task('jshint', function () { return gulp.src('js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); });
// 合并文件之后压缩代码 gulp.task('minify', function (){ return gulp.src('js/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('dist/scripts')) .pipe(uglify()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('dist/scripts')); }); //压缩html gulp.task('html', function() { return gulp.src('html/*.html') .pipe(htmlmin(options)) .pipe(gulp.dest('dist/html')) });
gulp.task('default', ['jshint','minify','html']);
运行gulp 即可
