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

认识Gulp

时间:2016-12-24 16:38:39      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:orm   down   pts   download   右键   image   span   针对   count   

gulp详细入门教程:http://www.ydcss.com/archives/18

安装gulp

前提:已经安装node.js、npm

$ npm install gulp --save-dev

gulp-sass:将scss编译成css的gulp插件

安装gulp-sass

$ npm install gulp-sass --save-dev

新建package.js文件

基于node.js项目必不可少的配置文件。

{
  "name": "gulpText",
  "version": "3.0.0",
  "scripts": {
    "init": "npm install"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-sass": "^2.3.2",
  }
}


新建gulpfile.js文件

var gulp = require(‘gulp‘);
var sass=require(‘gulp-sass‘);

gulp.task(‘testSass‘,function(){
    gulp.src(‘distn/styles/main.scss‘) //该任务针对的文件
        .pipe(sass()) //该任务调用的模块
        .pipe(gulp.dest(‘src/css‘)); //将会在src/css下生成index.css
});

gulp.task(‘default‘,[‘testSass‘]);

运行gulp

右键gulpfile.js文件,选择”Show Gulp Tasks”,打开Gulp窗口,双击需要运行的任务即可。

技术分享

 

gulp-concat:合并js文件

安装gulp-concat插件

$ npm install gulp-concat --save-dev
var concat = require(‘gulp-concat‘);
 
gulp.task(‘testVendor‘, function () {
    gulp.src([‘client/vendor/jquery.min.js‘, ‘client/vendor/angular.min.js‘])
        .pipe(concat(‘vendor2.js‘))
        .pipe(gulp.dest(‘src/js‘));
});

gulp.task(‘default‘, [‘testVendor‘]);

 

认识Gulp

标签:orm   down   pts   download   右键   image   span   针对   count   

原文地址:http://www.cnblogs.com/maoyazhi/p/6217239.html

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