认识Gulp

Posted YZ-M

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了认识Gulp相关的知识,希望对你有一定的参考价值。

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的主要内容,如果未能解决你的问题,请参考以下文章

Webpack vs Gulp

使用gulp 进行ES6开发

npm ande gulp cmd

gulp.spritesmith中的路径有什么问题?

Glob观看多个文件,处理一个

git和gulp使用