gulp开发简单配置以及配合browserify应用

前端开发都需要对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混淆 minvar less = require('gulp-less');        // less 编译var sourcemaps = require('gulp-sourcemaps');        //生成sourcemap文件 方便less 文件关系var cssmin = require('gulp-minify-css')     // css minvar 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 gulpgulp.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);    });

新年第一天以一篇博结束，祝大家新年快。