gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。
1.全局安装 gulp:
$ npm install --global gulp
2. 作为项目的开发依赖(devDependencies)安装:
$ npm install --save-dev gulp
3. 在项目根目录下创建一个名为 gulpfile.js
的文件:
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
4. 运行 gulp:
$ gulp
默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情。(以上是复制的)。
要进行的所有文件操作都要下载对应的依赖包。
在项目根目录下创建js文件,然后创建b.js和c.js来个文件夹,对这俩个文件进行操作。
b.js
console.log("this is b!!");
c.js
console.log('this is C');
分别下载gulp操作文件的相关依赖:
npm install gulp-concat
npm install gulp-
uglify
npm install gulp-
rename
npm install gulp-
dev
引入到gulpfile.js
var gulp = require('gulp');
var concat = require('gulp-concat'); //合并文件
var uglify = require('gulp-uglify'); //压缩代码
var rename = require('gulp-rename'); //重命名
var del = require('del'); //删除文件
继续操作gulpfile.js文件
var gulp = require('gulp');
var concat = require('gulp-concat'); //合并文件
var uglify = require('gulp-uglify'); //压缩代码
var rename = require('gulp-rename'); //重命名
var del = require('del'); //删除文件
gulp.task('min', function() {
// 将你的默认的任务代码放在这
gulp.src('js/*.js') //要操作文件的路径 表示js文件下的所有js文件b.js和c.js
.pipe(concat('all.js')) //合并后的文件名
.pipe(gulp.dest('dist/js')) //合并后文件的存放路径
.pipe(uglify()) // 文件压缩
.pipe(rename('all.min.js')) //压缩后文件名称
.pipe(gulp.dest('minJs')); //压缩后文件的存放路径
});
gulp.task('default', ['min']);
合并b.js与c.js: 在cmd运行gulp 执行tas的默认事件里的min
执行成功后项目里多了俩个文件夹dist和minJs. 说明文件合并压缩成功了。
监听文件操作: 在 gulpfile.js里加入
gulp.task('watch', function () { //监听文件是否发生变化
gulp.watch('js/c.js', function () { //接听c.js的变化
console.log('c.js have change'); //c.js发生改变时输出c.js have change
});
});
gulp.task('default', ['min', 'watch']);
再次运行gulp, 修改c.js保存一下
监听文件成功。
删除文件 : 在 gulpfile.js里加入
gulp.task('clean', function() {
return del('js/c.js'); //删除的文件
});
gulp.task('default', ['min', 'watch','clean']);
再次运行gulp c.js被删除。
以上为gulp的最基本操作,项目中以此为扩展,应用到实际项目中。希望对你有一点点用,不枉我啰
里啰嗦的写了这么多。
![微笑](http://static.blog.csdn.net/xheditor/xheditor_emot/default/smile.gif)