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

gulp入门

时间:2016-06-29 13:19:08      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:

参考:http://www.ydcss.com/archives/18   http://www.tuicool.com/articles/FJVNZf

1.淘宝npm服务 :npm install cnpm -g --registry=https://registry.npm.taobao.org 

2.全局安装gulp cnpm install gulp -g    查看版本:gulp -v

3.进到项目根目录执行:  cnpm init   该命令创建package.json文件

4.本地安装gulp cnpm install gulp --save-dev

使用 —-save-dev 来更新package.json文件,更新 devDependencies值,以表明项目需要依赖gulp,该依赖关系会保存在package.json中

5.安装执行任务需要的插件 : cnpm install jshint gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev

jshint要安装

6.新建 gulpfile.js

// 引入 gulp
var gulp = require(‘gulp‘); 

// 引入组件
var jshint = require(‘gulp-jshint‘);
var sass = require(‘gulp-sass‘);
var concat = require(‘gulp-concat‘);
var uglify = require(‘gulp-uglify‘);
var rename = require(‘gulp-rename‘);

// 检查脚本
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(gulp.dest(‘./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.src(‘./js/xxxxxx‘)....多个文件夹的情况 });
// 默认任务 gulp.task(‘default‘, function(){ gulp.run(‘lint‘, ‘sass‘, ‘scripts‘); // 监听文件变化 gulp.watch(‘./js/*.js‘, function(){ gulp.run(‘lint‘, ‘sass‘, ‘scripts‘); }); });

7.执行任务 : gulp scripts

 

gulp入门

标签:

原文地址:http://www.cnblogs.com/oyx305/p/5626415.html

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