码迷,mamicode.com
首页 > 其他好文 > 详细

整理gulp自动化构建工具

时间:2015-08-31 16:45:22      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:

教程地址: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‘);
    });
});

整理gulp自动化构建工具

标签:

原文地址:http://www.cnblogs.com/gyx19930120/p/4773123.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!