标签:
教程地址:http://www.dtao.org/archives/18 http://segmentfault.com/a/1190000000372547 http://www.w2bc.com/Article/12941
1、安装nodejs
2、新建package.json文件
3、全局和本地安装gulp
4、使用npm安装gulp插件(如:gulp-jshint、gulp-sass、gulp-mini-css、gulp-uglify等)
5、新建gulpfile.js文件
6、通过命令提示符运行gulp任务
说明:
package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件。它是一个普通json文件,所以不能添加任何注释。安装gulp插件的时候如果提示npm warn package.json这样的问题,请在package.json文件里添加"private": true,即将应用程序标记为私有。
gulpfile.js文件参考:
// 引入 gulp
var gulp = require(‘gulp‘);
// 引入组件
var jshint = require(‘gulp-jshint‘);
var sass = require(‘gulp-sass‘);
var concat = require(‘gulp-concat‘);
var mincss = require(‘gulp-mini-css‘);
var uglify = require(‘gulp-uglify‘);
var rename = require(‘gulp-rename‘);
//nodeJS中管道式方法的api一般为.pipe()方法,管道化执行组件任务,它很类似jQuery中的链式写法
//定义一个sass任务(自定义任务名称)
// 编译Sass
gulp.task(‘sass‘, function() {
gulp.src(‘./scss/*.scss‘) //该任务针对的文件,*代表所有文件
.pipe(sass()) //该任务调用的模块
.pipe(gulp.dest(‘./css‘)); //将会在css目录下生成.css文件
});
// 检查脚本
gulp.task(‘lint‘, function() {
gulp.src(‘./js/*.js‘)
.pipe(jshint())
.pipe(jshint.reporter(‘default‘));
});
// 合并,压缩文件
gulp.task(‘scripts‘, function() {
gulp.src(‘./js/*.js‘)
.pipe(concat(‘all.js‘))
.pipe(gulp.dest(‘./dist‘))
.pipe(rename(‘all.min.js‘))
.pipe(uglify())
.pipe(gulp.dest(‘./dist‘));
});
//每个gulpfile.js里都应当有一个dafault任务,它是缺省任务入口
// 定义默认任务
gulp.task(‘default‘, function(){
gulp.run(‘lint‘, ‘sass‘, ‘scripts‘);// 表示运行对应的任务
// 监听文件变化,若有改动则执行以下三个任务
gulp.watch(‘./js/*.js‘, function(){
gulp.run(‘lint‘, ‘sass‘, ‘scripts‘);
});
});
标签:
原文地址:http://www.cnblogs.com/gyx19930120/p/4773123.html