gulp:圧縮css、連結圧縮js、圧縮ピクチャ、Less使用

A、CSS圧縮
1、Nodejsのインストール
2、グローバルインストールgulp

npm install gulp -g

3、プロジェクトディレクトリの下にgulpをインストールする

npm install gulp --save-dev

4、packageを配置する.jsonファイルはプロジェクトディレクトリで実行し、順次入力すればよい

npm ini

    {

        "name":"gulp_test",/*   ,             ，    gulp，    gulp     */

        "version":"1.0.0",/*   */

        "description":"",/*  */

        "main":"index.js",

        "scripts": {

        "test":"echo \"Error:notestspecified\" && exit 1"

        },

        "author":"",/*  */

        "license":"ISC"/*      */

    }

5、css圧縮プラグインをローカルにインストールする

npm install --save-dev gulp-minify-css

6、プロジェクトルートディレクトリはgulpfileを作成する.jsファイル

    //    gulp

    var gulp = require('gulp')

    //    minify-css   （     CSS）

    var minifyCSS = require('gulp-minify-css')

    //    css   

    //        gulp css      

    gulp.task('css', function () {

    // 1.     

    gulp.src('css/*.css')

    // 2.     

    .pipe(minifyCSS())

    // 3.        

    .pipe(gulp.dest('dist/css'))

    })

    //        gulp auto      

    gulp.task('auto', function () {

    //       ，          css   

    gulp.watch('css/*.css', ['css'])

    });

    //    gulp.task('default')       

    //        gulp    css     auto   

    gulp.task('default', ['css', 'auto'])

7、gulpを実行して結果を見る
直接コマンドラインgulpを実行し、リスニングを終了ctrl+c
B、画像圧縮1、画像圧縮プラグインのインストール

npm install gulp-imagemin –save-dev
npm install imagemin-pngquant –save-dev

2、gulpfileを配置する.js
このgulptピクチャ圧縮を参照してください
ふかさあっしゅく

var gulp = require('gulp'),

imagemin = require('gulp-imagemin'), //       

pngquant = require('imagemin-pngquant');

gulp.task('testImagemin', function () { 
    gulp.src('src/img/*.{png,jpg,gif,ico}') 
        .pipe(imagemin({ 
                        progressive: true, 
                        svgoPlugins: [{removeViewBox: false}],//    svg viewbox   
                        use: [pngquant()] //  pngquant    png   imagemin   
        })) 
                        .pipe(gulp.dest('dist/img')); 
});

実行プログラムの追加

gulp.task('default',function(){ gulp.start('css','Imagemin'); });

C、Less
この記事gulp-lessを参考に
文字列の一致
D、JS合併圧縮1、合併インストールプラグイン

npm install gulp-concat --save-dev

gulpfileを編集する.js

var gp = require('gulp');
var concat = require('gulp-concat');

gp.task("taskName",function(){
    //  1.js 2.js   main.js，   dest/js   
    gp.src(['1.js','2.js']).pipe(concat('main.js')).pipe(gp.dest('./dest/js'));
})

コマンドライン実行

gulp taskName

2、圧縮

npm install gulp-uglify --save-dev

var gp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
gp.task("taskName",function(){
    //  1.js 2.js     main.js，   dest/js   
    gp.src(['1.js','2.js']).pipe(concat('main.js')).pipe(uglify()).pipe(gp.dest('./dest/js'));
})

gulpがプロジェクトで生成したファイルを直接新しいプロジェクトにコピーすれば、インストールせずにプロジェクトディレクトリの下で実行できます.