前端开发都需要对css ，js 打包压缩，less 编译，gulp简单的风格，可以完美的完成这项任务。
首先需要安装gulp
npm install gulp -g
npm install gulp --save-dev
安装gulp 需要的插件 如下
npm install gulp-*** --save-dev
var uglify = require('gulp-uglify'); //js混淆 min
var less = require('gulp-less'); // less 编译
var sourcemaps = require('gulp-sourcemaps'); //生成sourcemap文件 方便less 文件关系
var cssmin = require('gulp-minify-css') // css min
var livereload = require('gulp-livereload'); // 自动刷新 免除f5
项目根目录下新建 gulifile.js 文件
首先 需要对less 编译 压缩
//定义一个guleLess任务（自定义任务名称）
gulp.task('guleLess', function () {
gulp.src('public/src/less/**/*.less') //该任务针对的文件 less
.pipe(sourcemaps.init()) // less map 初始化
.pipe(streamify(less())) //该任务调用的模块
.pipe(cssmin()) //css 缩写
.pipe(sourcemaps.write({addComment: false}))
.pipe(gulp.dest('public/style')); //将会在src/css下生成index.css
});
对应目录，如下
addComment: false 生产的css ，或者js 里是否有描述
gulp 启动 和 代码变化监听
//监听文件变化
gulp.task('watchs', function() {
livereload.listen(); // 浏览器刷新
gulp.watch('public/src/*', ['guleLess', 'javascript']);
});
// cmd gulp
gulp.task('default',['watchs', 'guleLess', 'javascript']);
js 压缩混淆
gulp.task('javascript', function() {
gulp.src('public/src/javascripts/**/*.js')
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest('public/javascripts'));
});
当然可以把 要做webapp 时 就可以把 js 全部压缩到一个js里，同时需要gulp和browserify结合，添加如下包
var browserify = require('browserify');
var source = require('vinyl-source-stream'); //将Browserify的bundle()的输出转换为Gulp可用的一种虚拟文件格式流
var streamify = require('gulp-streamify'); //只支持 buffer 的插件直接处理 stream
gulp.task('javascript', function() {
var b = browserify();
//文件路径
files = ['public/src/javascripts/reg/index.js',
'public/src/javascripts/login/index.js'];
files.forEach(function(item){
b.add(item);
});
b.bundle().pipe(source('public/javascripts/packages.js'))
.pipe(streamify(uglify()))
.pipe(gulp.dest('./'));
});
d.add 可以换成require 就是 压缩 需要的 模块插件到一个js里 修改如下
files = ['jquery'];
files.forEach(function(item){
b.require(item);
});
新年第一天以一篇博结束，祝大家新年快。
有需要的交流的可以加个好友
