gulp插件合并、压缩

gulp依赖于node，node -v确认node正确安装了，npm -v确认npm也没问题。
　　npm list -g --depth 0可以查看npm安装过的包。

Paste_Image.png

1、gulp解决的问题
　　gulp的高度集成化开发环境，释放了前端开发中css压缩、js压缩、错误检查、合并js、压缩图片、压缩html、模块构造等消耗的时间，只要你能想到的基本都可以通过Gulp插件去实现。开发阶段写的注释、代码规范的命名，上线阶段的代码需要压缩合并优化节约网络资源。

2、gulp api
　　task 是指gulp的每一个任务。
　　src 是指要被处理的源文件。
　　dest() 指定处理后的文件的输出路径。
　　watch() 监视文件。
　　gulp文档http://www.gulpjs.com.cn/docs/getting-started/
　　安装注意npm install --global gulp -g在项目中还需要在项目目录下cmdnpm install --save-dev gulp让其成为项目的依赖项。

3、项目目录下依赖其它插件，每个插件只做一件事。在把插件依赖到项目了之后使用require导入，导入之后是一个函数变量，使用的时候用作函数的方式调用。

对js代码进行压缩 npm install --save-dev gulp-uglify gulp
　　对css进行压缩 npm install --save-dev gulp-cssnano gulp
　　对html进行压缩 npm install --save-dev gulp-htmlmin gulp
　　对代码进行合并 npm install --save-dev gulp-concat gulp
　　修改文件名 npm install --save-dev gulp-rename gulp
　　可以检测哪些文件被修改 npm install --save-dev gulp-changed gulp，npm install --save-dev gulp-jscs gulp。

可以插入指定的代码
　　　　npm install --save-dev gupl-header gulp
　　　　npm install --save-dev gulp-footer gulp
　　编写gulpfile.js文件，终端cd到该文件所在目录执行gulp。

4、使用插件实现合并css、js，压缩html

Demo　http://download.csdn.net/detail/linjiqian/9754496

Paste_Image.png

gulpfile.js

var gulp = require('gulp');
var concat = require('gulp-concat'); //导入拼接插件，concat是一个函数，直接concat(参数)调用。
var uglify = require("gulp-uglify");
var cssnano = require('gulp-cssnano');
var htmlmin = require('gulp-htmlmin');
var changed = require('gulp-changed');
var jscs = require('gulp-jscs');

var fs = require('fs');
var rename = require('gulp-rename');

//默认任务
gulp.task('default',function(){
    uglifyScripts();
    uglifyCss();
    uglifyHtml();
});


var DEST = 'gulpdemo/';
//合并压缩js
function uglifyScripts() {
   return gulp.src('js/*.js')
    .pipe(concat("js.js"))//合并
    .pipe(gulp.dest(DEST+"/js"))//输出一个js.js
    // 这会输出一个压缩过的并且重命名为 js.min.js 的文件
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(gulp.dest(DEST+"/js"));
}

//正常压缩js文件
// function uglifyScripts() {
//    return gulp.src('js/*.js')
//     .pipe(uglify())
//     .pipe(gulp.dest(DEST+"/js"));
// }

// 对css进行压缩
function uglifyCss(){
   return gulp.src('css/*.css')
    .pipe(changed(DEST+"/css"))//changed去找文件
    // .pipe(jscs())//未改变文件不会走过这里
    // .pipe(cssnano())
    .pipe(gulp.dest(DEST+'/css'));
}

// 压缩html任务
function uglifyHtml(){
  return gulp.src('*.html')
    // .pipe(changed(DEST))//changed去找文件
    // .pipe(jscs())//未改变文件不会走过这里
    .pipe(htmlmin({collapseWhitespace:true}))
    .pipe(gulp.dest(DEST));
}