标签:
教程地址: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