gulp教程之gulp插件

须知：

a:  以下插件的使用，须提前安‍装nodejs/全局安装gulp/本地安装gulp/cnpm安装/创建package.json和gulpfile.js文件。‍

b:  命令提示符在项目目录下写

1、使用gulp-concat合并javascript文件，减少网络请求。

 1）安装命令提示符执行 cnpm install gulp-concat --save-dev

 2） 配置gulpfile.js

      代码如下：

     var gulp = require('gulp'),//引用

              concat = require('gulp-concat');

               "textConcat"自定义项目名称

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

              gulp.src('src/js/*.js')//需要合并的js文件，

             .pipe(concat('all.js'))//合并后的文件名，

            .pipe(gulp.dest('dist/js'));//输出到dext/js目录下

            });

        3) 执行任务

             命令提示符执行：gulp testConcat

2、使用gulp-uglify压缩javascript文件，减小文件大小。

 1）安装命令提示符执行 cnpm install gulp-uglify --save-dev

 2） 配置gulpfile.js

      代码如下：

     var gulp = require('gulp'),//引用

              uglify = require('gulp-uglify');

               "jsmin"自定义项目名称

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

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

             .pipe(uglify())

            .pipe(gulp.dest('dist/js'));//输出到dext/js目录下

            });

        3) 执行任务

             命令提示符执行：gulp jsmin

3、对JS文件既压缩又合并

     提前安装合并、压缩插件

     配置gulpfile.js，代码如下：

     var gulp = require('gulp'),

      concat = require('gulp-concat'),

      uglify = require('gulp-uglify')

     //既压缩又合并

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

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

             .pipe(concat('all.js'))//合并后的文件名

             .pipe(uglify())//只加上这一句压缩插件

             .pipe(gulp.dest('dist/js'));

        });

命令提示符执行：gulp default或者gulp

继续阅读：gulp技巧  gulp教程  

原创文章请注明转载自杭州WEB前端外包网站本文地址：http://hz.35ui.cn/post/gulp.html，标题：gulp入门教程及使用技巧