七夕与Gulp的第一次!

标签：gulp   js   

最近又开始了Web前端的工作，在发布时候，需要对js，css等进行压缩，如果用了scss，还要编译。直接通过命令行一个一个敲，这个就很费劲了，刚好接触到了Gulp这个神器！

Gulp是什么，先来段官方介绍

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目

Gulp之前有个有个叫Grunt的的工具来搞这些的，但Grunt的配置搞起来略显麻烦，Gulp就让人小清新了一把。

Gulp使用非常简单，新建一个放Web的目录。

npm install --global gulp

npm install --save-dev gulp

然后在根目录建立一个 gulpfile.js。

这就是gulp的核心配置文件，打开后进行编辑。

var gulp = require(‘gulp‘);gulp.task(‘default‘, function() {  

// place code for your default task here

});

ok后，当前目录运行 gulp命令就可以执行了。

下来我们看下如何进行js压缩。

进行js压缩，需要用到gulp-uglify这个插件，使用插件之前要先进行安装。

npm install --save-dev gulp-uglify

成功后，在当前目录的node_modules中会有gulp-uglify出现。

之后打开gulp.js进行编辑。

var gulp = require(‘gulp‘);

var uglify = require(‘gulp-uglify‘);

gulp.task(‘default‘, function() {

gulp.src(‘app/**/*.js‘)

            ?.pipe(uglify())

            ?.pipe(gulp.dest(‘build/app‘));

});

以上代码的意思就是将app下的所有js文件压缩后拷贝到build/app目录下。

web根目录执行gulp，就能看到结果了。

真的是非常简单方便，但功能强大。Gulp还带了很多插件，包括对CoffeeScript的支持。

有兴趣的朋友可以试试。

更深入的报道且听下回分解。

======

感谢大家看完此篇文章，喜欢的话，请将此篇文章分享到好友圈，或向你的好友推荐， 是对我的最大支持与鼓励。

另有QQ群: 107584987。

所有技术文章都可在我的CSDN Blog http://blog.csdn.net/tommychen1228找到

七夕与Gulp的第一次!

标签：gulp   js   

原文地址：http://blog.csdn.net/tommychen1228/article/details/47820343