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混淆 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);
    });

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

有需要的交流的可以加個好友