使用Gulp進行Javascript以及css壓縮合並

1.安裝gulp

gulp是基於Node.js的前端構建工具。因此首先須要安裝nodejs，安裝nodejs。

完成nodejs安裝以後，須要使用npm安裝gulp。

先安裝全局gulp

npm install -g gulp
而後在項目根目錄下安裝本地gulp。

此時項目根目錄下會多出下面這個文件夾 node_modules

好的，如今gulp已經安裝完成了，可是gulp自己不提供js壓縮合並等功能，須要使用gulp的相關插件。目前只須要完成js壓縮合並和css文件壓縮的功能，先安裝相應的插件：

1.css壓縮 　　gulp-minify-css

2.js壓縮　　　gulp-uglify

3.js合併　　　gulp-concat　　

因爲壓縮以前須要對js代碼進行代碼檢測，壓縮完成以後須要加上min的後綴，咱們還須要安裝另外兩個插件：

4.重命名　　 gulp-rename

5.js代碼檢測　 gulp-jshint　(或gulp-jslint)

(更多插件能夠查看 http://gulpjs.com/plugins/ )

在項目根目錄下執行如下命令：

npm install gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-jshint --save-dev
安裝好的插件會出如今上面提到的node_modules文件夾中。

2.使用gulp

ok，如今可使用gulp了，在項目根目錄下建立gulpfile.js文件。

在gulpfile.js中添加如下代碼

var gulp = require('gulp')，
    minifycss = require('gulp-minify-css')，
    concat = require('gulp-concat')，
    uglify = require('gulp-uglify')，
    rename = require('gulp-rename')，
    jshint=require('gulp-jshint');
    //語法檢查
    gulp.task('jshint'， function () {
        return gulp.src('js/*.js')
            .pipe(jshint())
            .pipe(jshint.reporter('default'));
    });
    //壓縮css
    gulp.task('minifycss'， function() {
        return gulp.src('css/*.css')    //須要操做的文件
            .pipe(rename({suffix: '.min'}))   //rename壓縮後的文件名
            .pipe(minifycss())   //執行壓縮
            .pipe(gulp.dest('Css'));   //輸出文件夾
    });
    //壓縮，合併 js
    gulp.task('minifyjs'， function() {
        return gulp.src('js/*.js')      //須要操做的文件
            .pipe(concat('main.js'))    //合併全部js到main.js
            .pipe(gulp.dest('js'))       //輸出到文件夾
            .pipe(rename({suffix: '.min'}))   //rename壓縮後的文件名
            .pipe(uglify())    //壓縮
            .pipe(gulp.dest('Js'));  //輸出
    });
　　//默認命令，在cmd中輸入gulp後，執行的就是這個任務(壓縮js須要在檢查js以後操做)
    gulp.task('default'，['jshint']，function() {
        gulp.start('minifycss'，'minifyjs'); 
　　});

上述代碼中的相關方法能夠查看 gulp API docs

在文件根目錄下執行gulp命令：

(若是Js文件有問題時，會出現相應的error提示，按照提示的錯誤信息修改便可)

bingo，如今能夠在css文件夾中看到壓縮好的css文件，在js中能夠看到合併壓縮好的main.min.js 。任務完成，只須要將html中css，js引用的路徑修改爲新的路徑便可。

增長Sass

npm install gulp-sass --save-dev

'use strict';
 
var gulp = require('gulp');
var sass = require('gulp-sass');
 
gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});
 
gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});