Gulp前端构建

gulp的使用

2017-09-18  本文已影响13人  痛心凉
gulp是一个构建工具,可以通过它自动执行网站开发过程中的公共任务,例如:编译sass/less,编译压缩混淆javaScript,合并编译模板和版本控制等。

安装gulp

首先,检测node.js是否存在,因为gulp的使用需要node环境。

接着,在项目目录中安装gulp为本地模块

本地安装gulp

npm insstall --save-dev gulp

最后,安装项目中依赖的 gulp plugin模块gulp-cssmin, gulp-jshint

npm install --save-dev gulp-cssmin gulp-jshint

使用

首先,在根目录中创建一个gulpfile文件。然后写.....

var gulp = require('gulp'); //加载gulp模块
var uglifyJs = require('gulp-uglify'); //加载uglify模块
var cleanCss = require('gulp-clean-css'); //加载clean模块
//定义一个压缩js代码的任务
gulp.task('uglifyJs', [], function() {
gulp.src('build/.js') //找到原始文件
.pipe(uglifyJs()) //压缩js代码
.pipe(gulp.dest('js')); //压缩后的代码储存在这里
});
// //定义一个压缩css代码的任务
//gulp.task('cleanCss', [], function() {
// gulp.src('gulp/
.css') //找到原始文件
// .pipe(cleanCss()) //压缩css代码
// .pipe(gulp.dest('gulp/build')); //压缩后的代码储存在这里
//});
// //定义一个监听任务
gulp.task('watch', function() {
//监听文件,一旦文件有变化,就执行相应的任务
gulp.watch('build/.js', ['uglifyJs']);
// gulp.watch('gulp/
.css', ['cleanCss']);
});
// //默认执行的任务, 执行完数组中的任务之后,再执行当前任务
gulp.task('default', ['uglifyJs'], function() {
console.log('执行完毕');
});

上一篇下一篇

猜你喜欢

热点阅读