gulp 前端自动构建工具_综合

中文官网地址：http://www.gulpjs.com.cn

安装：

前提是安装了nodejs，步骤可见：点击打开链接
全局安装：npm install gulp -g
在项目中安装: npm install gulp --save-dev
检测是否安装成功： gulp -v

配置：

现在自己的项目根目录下新建文件：gulpfile.js,固定名称。

在文件中引入gulp模块， var gulp = require("gulp")

安装项目需要的插件：

npm install gulp-minify-css --save-dev

部分配置代码如下：

var outputDir       = 'newactivity';
var outputJSDir     = outputDir + '/js';
var outputCSSDir    = outputDir + '/css';
var outputHTMLDir    = outputDir + '/html';var gulp = require('gulp');var pump = require('pump');
var minify = require('gulp-minify');
var htmlmin = require('gulp-htmlmin');
var cleancss = require('gulp-clean-css');
var UglifyJS = require('gulp-uglify');//1、压缩html目录下的代码
gulp.task('compress-html',function(){gulp.src('*.html').pipe(htmlmin({collapseWhitespace: true})).pipe(gulp.dest(outputDir))
})//2、压缩js目录下的js文件
gulp.task('compress-js', function (cb){var option = {mangle:{toplevel:true,keep_fnames:true,reserved:['$','http'],}};pump([gulp.src('js/*.js'),UglifyJS(option),gulp.dest(outputJSDir)],cb);
});//3、压缩css文件
gulp.task('compress-css', function(){gulp.src('css/**/*.css').pipe(cleancss({compatibility: 'ie8',keepSpecialComments:'*',sourceMap: true,relativeTo:'css/'})) //保留ie以下的兼容写法.pipe(gulp.dest(outputCSSDir))
})//4、复制文件
gulp.task('copy-files', function(){gulp.src("image/**").pipe(gulp.dest(outputDir+'/image'))
})gulp.task("default",['copy-files','compress-html','compress-js','compress-css'])

注意：

混淆js的时候会改变变量名称，如果你有跨文件使用的变量的话，使用reserved定义好不好被混淆的变量名即可。