前端构建工具gulp
2016-11-16 21:44
330 查看
1、安装Node
首先,最基本也最重要的是,我们需要搭建node环境。访问 http://nodejs.org ,然后点击大大的绿色的 install 按钮,下载完成后直接运行程序,就一切准备就绪。 npm 会随着安装包一起安装,稍后会用到它。
安装完:
node -v
npm -v
可以查看node的版本,和node版本安装工具的版本。
2、安装gulp
cd切换到项目目录:
npm install -g gulp
-g表示在全局环境安装,以便任何项目都能使用它。
安装完gulp后
gulp -v
查看是否能正常显示版本号。
3、安装所需扩展
在项目目录下放package.json
{
"name": "cf",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-amd-optimize": "^0.4.3",
"gulp-autoprefixer": "^3.1.1",
"gulp-clean-css": "^2.0.13",
"gulp-concat": "^2.6.0",
"gulp-css-spritesmith": "0.0.5",
"gulp-imagemin": "^3.0.3",
"gulp-jshint": "^2.0.1",
"gulp-livereload": "^3.8.1",
"gulp-notify": "^2.2.0",
"gulp-rename": "^1.2.2",
"gulp-ruby-sass": "^2.1.0",
"gulp-uglify": "^2.0.0",
"gulp.spritesmith": "^6.2.1",
"jshint": "^2.9.4"
}
}
包可以根据自己需要选择性修改。
npm install运行,自动安装package.json中的扩展。
4、新建Gulpfile文件,运行gulp
var gulp = require('gulp'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
notify = require('gulp-notify'),
amdOptimize = require('gulp-amd-optimize'),
minifycss = require('gulp-clean-css'),
imagemin = require('gulp-imagemin'),
autoprefixer = require('gulp-autoprefixer'),
sass = require('gulp-ruby-sass'),
spritesmith = require('gulp.spritesmith'),
cssSprite = require('gulp-css-spritesmith'),
livereload = require('gulp-livereload'),
del = require('del');
//清理文件
gulp.task('clean', function(cb) {
del(['dist'], cb);
});
//处理css文件,合并压缩
gulp.task('css',function(){
return gulp.src( ['css/*.css'])
.pipe(autoprefixer({
borwsers: ['last 2 versions'," > 5% "]
}))
.pipe(concat('main.css'))
.pipe(gulp.dest('dist/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('dist/css'))
.pipe(notify({ message: 'Css task complete' }));
});
gulp.task('cfjs-chat', function() {
return gulp.src(['js/socket.io.js','js/json2.js','js/face.js','js/chat.js'])
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
//.pipe(amdOptimize( 'main'))
.pipe(concat('cf-chat.js'))
.pipe(gulp.dest('dist/js'))
.pipe(rename('cf-chat.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
.pipe(uglify())
.pipe(notify({ message: 'Scripts task complete' }));
});
//合并压缩JS文件
gulp.task('scripts',['js'],function(){
return gulp.src('js/util/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js/util'))
});
//压缩图片
gulp.task('img',function () {
gulp.src('images/min/*')
.pipe(imagemin({
progressive: true
}))
.pipe(gulp.dest('dist/img'))
.pipe(notify({ message: 'Images task complete' }));
});
//css精灵
gulp.task('sprite',function ( cb ) {
var spriteData = gulp.src('dist/img/*.png').pipe(spritesmith({
imgName: 'sprite.png',
cssName: 'sprite.css',
padding: 2
}));
return spriteData.pipe(gulp.dest('sprite'));
});
//文件监控
gulp.task( 'watch',function(){
gulp.watch( 'css/**/*.*',[ 'css' ] );
gulp.watch( 'js/**/*.*',[ 'scripts' ] );
});
有需要要完整gulpfile.js的可以留言。不过这些都是比较老的技术了,现在流行的是:webpack。
更多请支持:http://www.webyang.net/Html/web/article_282.html
首先,最基本也最重要的是,我们需要搭建node环境。访问 http://nodejs.org ,然后点击大大的绿色的 install 按钮,下载完成后直接运行程序,就一切准备就绪。 npm 会随着安装包一起安装,稍后会用到它。
安装完:
node -v
npm -v
可以查看node的版本,和node版本安装工具的版本。
2、安装gulp
cd切换到项目目录:
npm install -g gulp
-g表示在全局环境安装,以便任何项目都能使用它。
安装完gulp后
gulp -v
查看是否能正常显示版本号。
3、安装所需扩展
在项目目录下放package.json
{
"name": "cf",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-amd-optimize": "^0.4.3",
"gulp-autoprefixer": "^3.1.1",
"gulp-clean-css": "^2.0.13",
"gulp-concat": "^2.6.0",
"gulp-css-spritesmith": "0.0.5",
"gulp-imagemin": "^3.0.3",
"gulp-jshint": "^2.0.1",
"gulp-livereload": "^3.8.1",
"gulp-notify": "^2.2.0",
"gulp-rename": "^1.2.2",
"gulp-ruby-sass": "^2.1.0",
"gulp-uglify": "^2.0.0",
"gulp.spritesmith": "^6.2.1",
"jshint": "^2.9.4"
}
}
包可以根据自己需要选择性修改。
npm install运行,自动安装package.json中的扩展。
4、新建Gulpfile文件,运行gulp
var gulp = require('gulp'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
notify = require('gulp-notify'),
amdOptimize = require('gulp-amd-optimize'),
minifycss = require('gulp-clean-css'),
imagemin = require('gulp-imagemin'),
autoprefixer = require('gulp-autoprefixer'),
sass = require('gulp-ruby-sass'),
spritesmith = require('gulp.spritesmith'),
cssSprite = require('gulp-css-spritesmith'),
livereload = require('gulp-livereload'),
del = require('del');
//清理文件
gulp.task('clean', function(cb) {
del(['dist'], cb);
});
//处理css文件,合并压缩
gulp.task('css',function(){
return gulp.src( ['css/*.css'])
.pipe(autoprefixer({
borwsers: ['last 2 versions'," > 5% "]
}))
.pipe(concat('main.css'))
.pipe(gulp.dest('dist/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('dist/css'))
.pipe(notify({ message: 'Css task complete' }));
});
gulp.task('cfjs-chat', function() {
return gulp.src(['js/socket.io.js','js/json2.js','js/face.js','js/chat.js'])
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
//.pipe(amdOptimize( 'main'))
.pipe(concat('cf-chat.js'))
.pipe(gulp.dest('dist/js'))
.pipe(rename('cf-chat.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
.pipe(uglify())
.pipe(notify({ message: 'Scripts task complete' }));
});
//合并压缩JS文件
gulp.task('scripts',['js'],function(){
return gulp.src('js/util/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js/util'))
});
//压缩图片
gulp.task('img',function () {
gulp.src('images/min/*')
.pipe(imagemin({
progressive: true
}))
.pipe(gulp.dest('dist/img'))
.pipe(notify({ message: 'Images task complete' }));
});
//css精灵
gulp.task('sprite',function ( cb ) {
var spriteData = gulp.src('dist/img/*.png').pipe(spritesmith({
imgName: 'sprite.png',
cssName: 'sprite.css',
padding: 2
}));
return spriteData.pipe(gulp.dest('sprite'));
});
//文件监控
gulp.task( 'watch',function(){
gulp.watch( 'css/**/*.*',[ 'css' ] );
gulp.watch( 'js/**/*.*',[ 'scripts' ] );
});
有需要要完整gulpfile.js的可以留言。不过这些都是比较老的技术了,现在流行的是:webpack。
更多请支持:http://www.webyang.net/Html/web/article_282.html
相关文章推荐
- 前端构建工具gulp入门教程
- 前端构建工具gulp入门教程
- Gulp, 比Grunt更好用的前端构建工具
- gulp前端自动化构建工具入门篇
- Gulp, 比Grunt更好用的前端构建工具
- (转)前端构建工具gulp入门教程
- Gulp.js—比Grunt更易用的前端构建工具-前端自动化
- 前端构建工具gulp入门教程
- Gulp.js----比Grunt更易用的前端构建工具
- 前端构建工具之gulp(一)「图片压缩」
- 前端构建工具之gulp的安装和配置
- 前端开发构建工具---Gulp介绍
- 前端构建工具——Gulp
- gulp 前端自动化构建工具之构建less
- 前端自动化构建工具 Gulp 使用
- 【转载】前端构建工具gulp入门教程
- 前端构建工具gulp使用
- 前端构建工具gulp入门教程
- 前端构建工具之gulp_常用插件