1. sudo npm install -g gulp //以管理员身份全局安装gulp （执行命令行之前确保本地已经安装node.js 和npm ）
gulp-v //查看是否安装成功
2. npm install—-save-dev gulp //接下来，我们需要将gulp安装到项目本地
这里，我们使用—-save-dev来更新package.json文件，更新devDependencies值，以表明项目需要依赖gulp。
3.新建Gulpfile文件，运行gulp
安装好gulp后我们需要告诉它要为我们执行哪些任务，首先，我们自己需要弄清楚项目需要哪些任务。
.检查Javascript
.编译Sass（或Less之类的）文件
.合并Javascript
.压缩并重命名合并后的Javascript
npm install gulp-jshint gulp-sass gulp-less gulp-concat gulp-minify-css gulp-uglify gulp-rename gulp-watch --save-dev
提醒下，如果以上命令提示权限错误，需要添加sudo再次尝试。
4.新建gulpfile文件
现在，组件都安装完毕，我们需要新建gulpfile文件以指定gulp需要为我们完成什么任务。
gulp只有五个方法：task，run，watch，src，和dest。
在项目根目录新建一个js文件并命名为gulpfile.js，把下面的代码粘贴进去：
// 引入 gulp
var gulp =require('gulp');
// 引入组件
var jshint =require('gulp-jshint');//js语法检测
var sass =require('gulp-sass');//sass
var less = require('gulp-less');//less
var cssmin = require('gulp-minify-css');//压缩css
var concat =require('gulp-concat');//合并
var uglify =require('gulp-uglify');//压缩就是
var rename =require('gulp-rename'); //重命名
var watch = require('gulp-watch')；
// 检查脚本
gulp.task('lint',function(){
gulp.src('./js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 编译Sass
gulp.task('sass',function(){
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(cssmin())
.pipe(gulp.dest('./css'));
});
//编译less
gulp.task('less', function () {
gulp.src('./less/*.less')
.pipe(less())
.pipe(cssmin())
.pipe(gulp.dest('./app/dist/css'));
});
// 合并，压缩文件
gulp.task('scripts',function(){
gulp.src('./js/*.js')
.pipe(concat('all.js')) //目录下的js全部合并到all.js
.pipe(gulp.dest('./dist')) //将文件放到这个目录下面
.pipe(rename('all.min.js')) //重命名
.pipe(uglify()) //压缩
.pipe(gulp.dest('./dist')); //放到此目录下面
});
// 默认任务
gulp.task('default',function(){
gulp.run('lint','sass','scripts','less');// 监听文件变化
gulp.watch('./js/*.js',function(){
gulp.run('lint','sass','scripts','less');
});
});
这时，我们创建了一个基于其他任务的default任务。使用.run()方法关联和运行我们上面定义的任务，使用.watch()方法去监听指定目录的文件变化，当有文件变化时，会运行回调定义的其他任务。
//监听js/less变化
gulp.task('default',function () {
gulp.run(['less']);
gulp.watch('./less/**.less', ['less']);
});
5.gulp
启动文件 如果正常启动则可以愉快的编程了
网友评论