首页 > 代码库 > gulp的简单应用

gulp的简单应用

下面是使用gulp压缩 scss&js 文件的简单应用:


//gulpfile.js名字必须是这个
//这儿文件告诉gup工具,具体要做那些事情


//1.引入gulp模块
//var gulp = require(‘gulp‘);

//2.告诉gulp去执行某个任务
// gulp.task("task.name",function(){
// //do something
//
// });
// gulp.task("bacon",function(){
// console.log(‘i love to eat bacon!‘);
// });
//3.执行方法 在终端: gulp bacon 写什么执行什么

//4. 将style.scss文件转css文件
//需要引入sass模块
//安装
// npm install --save-dev gulp-plumber@1.0.1 gulp-ruby-sass@2.0.4 gulp-filter@3.0.1 gulp-changed@1.0.0 gulp-autoprefixer@3.0.2 gulp-sourcemaps@1.6.0

// gulp.task(‘sass‘,function(){
//
// })

/**
* Generate CSS from SCSS
* Build sourcemaps
*
* npm install gulp-sass --save-dev

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

gulp.task(‘sass‘, function () {
// 指定压缩的文件
return gulp.src(‘./app/scss/*.scss‘)
.pipe(sass().on(‘error‘, sass.logError))
//指定要压缩到哪个目录
.pipe(gulp.dest(‘./app/css‘));
});


//执行:gulp sass

//压缩js: 1.npm install gulp-uglify --save-dev

// var gulp = require(‘gulp‘);
// var uglify=require(‘gulp-uglify‘);
// gulp.task(‘uglify‘,function(){
// //当前压缩的文件是谁
// return gulp.src(‘./app/js/test.js‘)
// .pipe(uglify())
// .pipe(gulp.dest(‘dist‘))
// })
//执行 : gulp uglify


// npm install gulp-rename --save-dev 改名

//压缩后改名

var gulp = require(‘gulp‘);
var uglify=require(‘gulp-uglify‘);
gulp.task(‘uglify‘,function(){
//当前压缩的文件是谁
return gulp.src(‘./app/js/test.js‘)
.pipe(uglify())
.pipe(rename({suffix:‘.min‘}))
.pipe(gulp.dest(‘dist‘))
})
//执行 : gulp uglify

gulp的简单应用