gulp在前端的简易运用

对于脚手架工具，我们有很多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 即可