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']);
});