More Related Content Similar to Gulp ことはじめ (20) Gulp ことはじめ12. sassのコンパイル
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('htdocs/sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('./htdocs/css'));
});
gulp.task('default', ['sass']);
13. sassのコンパイル
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('htdocs/sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('./htdocs/css'));
});
gulp.task('default', ['sass']);
14. sassのコンパイル
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('htdocs/sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('./htdocs/css'));
});
gulp.task('default', ['sass']);
15. sassのコンパイル
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('htdocs/sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('./htdocs/css'));
});
gulp.task('default', ['sass']);
16. sassのコンパイル
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('htdocs/sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('./htdocs/css'));
});
gulp.task('default', ['sass']);
23. module.exports = function(grunt) {
grunt.initConfig({
paths: {
css: 'htdocs/css/',
cssdist: 'htdocs/dist/css/',
img: 'htdocs/img/',
imgdist: 'htdocs/dist/img/'
},
autoprefixer: {
options: {
browsers: ['last 2 version']
},
files: {
expand: true,
flatten: true,
src: '<%= paths.css %>*.css',
dest: '<%= paths.cssdist %>pre/'
}
},
cssmin: {
compress: {
files: {
'<%= paths.cssdist %>style.min.css': ['<%= paths.cssdist %>pre/*.css']
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: '<%= paths.img %>',
src: '**/*.{jpg,gif}',
dest: '<%= paths.imgdist %>'
}]
}
},
pngmin: {
compile: {
options: {
ext: '.png'
},
files: [{
expand: true,
cwd: '<%= paths.img %>',
src: '**/*.png',
dest: '<%= paths.imgdist %>'
}]
}
},
watch: {
css:{
files: ['<%= paths.css %>*.css'],
tasks: ['autoprefixer', 'cssmin']
},
img:{
files: ['<%= paths.img %>**/*.{png,jpg,gif}'],
tasks: ['imagemin', 'pngmin']
}
}
});
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-pngmin');
grunt.registerTask('default', ['autoprefixer', 'cssmin', 'imagemin', 'pngmin']);
};
24. module.exports = function(grunt) {
grunt.initConfig({
paths: {
css: 'htdocs/css/',
cssdist: 'htdocs/dist/css/',
img: 'htdocs/img/',
imgdist: 'htdocs/dist/img/'
},
autoprefixer: {
options: {
browsers: ['last 2 version']
},
files: {
expand: true,
flatten: true,
src: '<%= paths.css %>*.css',
dest: '<%= paths.cssdist %>pre/'
}
},
cssmin: {
compress: {
files: {
'<%= paths.cssdist %>style.min.css': ['<%= paths.cssdist %>pre/*.css']
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: '<%= paths.img %>',
src: '**/*.{jpg,gif}',
dest: '<%= paths.imgdist %>'
}]
}
},
pngmin: {
compile: {
options: {
ext: '.png'
},
files: [{
expand: true,
cwd: '<%= paths.img %>',
src: '**/*.png',
dest: '<%= paths.imgdist %>'
}]
}
},
watch: {
css:{
files: ['<%= paths.css %>*.css'],
tasks: ['autoprefixer', 'cssmin']
},
img:{
files: ['<%= paths.img %>**/*.{png,jpg,gif}'],
tasks: ['imagemin', 'pngmin']
}
}
});
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-pngmin');
grunt.registerTask('default', ['autoprefixer', 'cssmin', 'imagemin', 'pngmin']);
};
67行
26. var gulp = require('gulp');
var concat = require('gulp-concat');
var prefixer = require('gulp-autoprefixer');
var minify = require('gulp-minify-css');
var imagemin = require('gulp-imagemin');
var plumber = require('gulp-plumber');
gulp.task('css', function () {
gulp.src('htdocs/css/**/*.css')
.pipe(plumber())
.pipe(prefixer('last 2 version'))
.pipe(concat('style.min.css'))
.pipe(minify())
.pipe(gulp.dest('htdocs/dist/css'));
});
gulp.task('img', function () {
gulp.src('htdocs/img/**/*')
.pipe(plumber())
.pipe(imagemin())
.pipe(gulp.dest('htdocs/dist/img'));
});
gulp.task('watch', function () {
gulp.watch('htdocs/css/**/*', ['css']);
gulp.watch('htdocs/img/**/*', ['img']);
});
gulp.task('default', ['css', 'img']);
27. module.exports = function(grunt) {
grunt.initConfig({
paths: {
css: 'htdocs/css/',
cssdist: 'htdocs/dist/css/',
img: 'htdocs/img/',
imgdist: 'htdocs/dist/img/'
},
autoprefixer: {
options: {
browsers: ['last 2 version']
},
files: {
expand: true,
flatten: true,
src: '<%= paths.css %>*.css',
dest: '<%= paths.cssdist %>pre/'
}
},
cssmin: {
compress: {
files: {
'<%= paths.cssdist %>style.min.css': ['<%= paths.cssdist %>pre/*.css']
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: '<%= paths.img %>',
src: '**/*.{jpg,gif}',
dest: '<%= paths.imgdist %>'
}]
}
},
pngmin: {
compile: {
options: {
ext: '.png'
},
files: [{
expand: true,
cwd: '<%= paths.img %>',
src: '**/*.png',
dest: '<%= paths.imgdist %>'
}]
}
},
watch: {
css:{
files: ['<%= paths.css %>*.css'],
tasks: ['autoprefixer', 'cssmin']
},
img:{
files: ['<%= paths.img %>**/*.{png,jpg,gif}'],
tasks: ['imagemin', 'pngmin']
}
}
});
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-pngmin');
grunt.registerTask('default', ['autoprefixer', 'cssmin', 'imagemin', 'pngmin']);
};
29行